Javascript image rollovers are used to bring interactivity to webpages. The use of the rollover is one of the most popular forms of Javascript on the web. Javascript rollovers (or mouse-over effects) are fairly common on today’s websites and can be used very creatively.
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.
In this article I’m going to show you how to add cool Javascript rollover effects to images on your website.
Have no idea what I’m talking about? If you want to become more familiar with Javascript, I invite you to check out the article Varun composed last week entitled What is JavaScript and How Does It Work?. Also, you can Quickly Check If You’re Running A JavaScript Enabled Browser.
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
After creating the images, it’s time to create the code. In Notepad, start typing up a simple HTML file. We will insert our Javascript after the <head> tag.
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.
When finished, save the file as a ‘.html’ file. You can double click the file and it should open up in your web browser with your images and rollover effect working properly. Now that you’ve tested your code you can add it to your website and begin amazing people with your flashy Javascript.
To see it in action, click here and mouse over the image to see what we have just created.
Conclusion
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.
Was this article helpful for you? Will you be utilizing JavaScript rollovers on your website? I would love to hear your thoughts and ideas in the comment section below!
Image Credit: Noah Sussman
Tagged: css • html • image effects • javascript • web development • webmaster tools
