This is just a simple tutorial to show you how to use your css knowledge to swap an image on mouseover. Now I came up with this idea the other night in a near sleep, so if anyone has any problems with it, I will do my best to help you. So let's just start with an example, below you will see a thumbnail for one of my wallpapers, and if you move the mouse over it, it should change. (Clicking on the link will only bring you to the top of the page)





Now let's just talk through how easy this little code is. We already know how to define our links in css, and how to define our backgrounds, so using this knowledge we create a new class of links (I have named this thumb for use on my example). Your new class of links should look a little like this:


.thumb a:link { }
.thumb a:active { }
.thumb a:visited { }
.thumb a:hover { }



Now we simply add in the properties of our background-image, width, height, border, and so on. And then in the a:hover section we change the image url to that of the one we wish to use on mouse over. And that's it for the css. My css code for the above example looks like this:


.thumb a:link { width: 200px; height: 150px; border: 0px solid black; background-image: url(thumbs/telly/spuffy-01-1024.jpg); background-repeat: no-repeat; }


.thumb a:active { width: 200px; height: 150px; border: 0px solid black; background-image: url(thumbs/telly/spuffy-01-1024.jpg); background-repeat: no-repeat; }


.thumb a:visited { width: 200px; height: 150px; border: 0px solid black; background-image: url(thumbs/telly/spuffy-01-1024.jpg); background-repeat: no-repeat; }


.thumb a:hover { width: 200px; height: 150px; border: 0px solid black; background-image: url(thumbs/telly/spuffy-01-1024b.jpg); background-repeat: no-repeat; }


So now, how do we do our links in our html file? Well that's really easy, first of all we tell it what class it is (thumb), then we do our link. And that's pretty much it. The code to use in your html file is below. PLEASE NOTE: you will need to remove the stars!

<div class=thumb><a href="#top"></a></div>

To do multiple just repeat the process and change the class name for each. Easy as pie! Much better than using javascript or other more complicated procedures. And this is (hopefully) just as effective.