How to Make a Javascript Image Rollover

This updated guide examines How to Make a Javascript Image Rollover and organizes the essential facts, background, and practical takeaways in clear American English.

Steps

1. Prepare two images for the rollover effect. Select two different images to make a rollover image and save them in the same folder where you will save your HTML file displaying a rollover image.
2. Open any text editor of your choice. Dreamweaver will be used as the text editor in this article. Otherwise, if your text editor is blank when you open it, you need to enter HTML elements to build a web page.
3. Locate thesection. JavaScript code will be inserted within thetag. Two JavaScript functions will be created to change the images. The two functions are namedMouseRolloverandMouseOutin the code below. The image's src property will be used to change the image's source when those two functions are called.
4. Copy the following JavaScript code:

   functionMouseRollover(MyImage){MyImage.src="MyPicture2.jpg";}functionMouseOut(MyImage){MyImage.src="MyPicture1.jpg";}

5. Paste the JavaScript code in between thesection onto your text editor. TheMyPicture2.jpgin the functionMouseRollovershould be replaced by your rollover image's name and theMyPicture1.jpgin the function calledMouseOutshould be replaced by your original image's name.
6. Locate thesection. The image tagwill be applied to display the rollover image. In this example, theAlt='Title'that refers to the image title's name is omitted.
7. Copy the following code:

   div>

8. Paste the code in between thesection. Theonmouseoverproperty is added inside the image tag above and will be assigned to call the JavaScript functionImage Rolloverto change your original image to a new rollover image. ReplaceMyPicture1.jpgwith your original image's name. Moreover, another property calledonMouseOutis added to change the image back into its original one when you move your mouse away from the rollover image.
9. Review the entire code. Your code should look similar to the code below. You can play around with the code from this example and see how things change.