You’ve seen them. Images that have been constructed this way change when you drag your mouse over them and change back when you remove the cursor. Mouse-over effects are very easy to create and they can really add life to your images or website.
Now that you’re feeling a little more confident we can begin.
Step 1: Create Two Images
In order for this effect to work properly, you need to create two images. Ideally, these should have the same dimensions (height and width) and should reside in the same directory. It’s important that you can remember and differentiate between the names of the images, so don’t name them anything too long or difficult.
For this example I have named my images testbox1.gif and testbox2.gif.
Step 2: Create An HTML Document
All we are doing here is defining the images. Although my code has testbox1 and testbox2 you can change these to the names of your two images.
The <body> tag is where we’ll insert our call to action. Within the <body> tag, insert the image source code the way you would any other HTML image, except in this case we have to add the mouseover and mouseout functions to the code to achieve the rollover effect.
To see it in action, click here and mouse over the image to see what we have just created.
This code should be all you will need to utilize any rollovers you want on the webpage. The ‘over’ and ‘out’ functions are what will be doing all the work here. They call the images when the mouse is moved over them and off of them.
For the image source, you only need to type the name of the image, so long as the HTML file is saved in the same folder the images are. If they are not, you need only to point to the images’ location like you would any other image in HTML.
Image Credit: Noah Sussman