Other Guides

How to Make a JavaScript Image Rollover

Prepare two images for the rollover effect., Open any text editor of your choice., Locate the section., Copy the following JavaScript code: function MouseRollover(MyImage) { MyImage.src = "MyPicture2.jpg"; } function MouseOut(MyImage) { MyImage.src...

13 Steps 2 min read Advanced

Step-by-Step Guide

  1. Step 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. Step 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. , JavaScript code will be inserted within the <head></head> tag.

    Two JavaScript functions will be created to change the images.

    The two functions are named MouseRollover and MouseOut in the code below.

    The image’s src property will be used to change the image’s source when those two functions are called. ,, The MyPicture2.jpg in the function MouseRollover should be replaced by your rollover image’s name and the MyPicture1.jpg in the function called MouseOut should be replaced by your original image’s name. , The image tag <image src=”FileName” Alt=”Title” boarder="0px" width="650px" height="550px"/> will be applied to display the rollover image.

    In this example, the Alt=”Title” that refers to the image title’s name is omitted. ,, The onmouseover property is added inside the image tag above and will be assigned to call the JavaScript function Image Rollover to change your original image to a new rollover image.

    Replace MyPicture1.jpg with your original image’s name.

    Moreover, another property called onMouseOut is added in order to change the image back into its original one when you move your mouse away from the rollover image. , Your code should look similar to the code below.

    You can play around with the code from this example and see how things change. <!doctype html> <html> <head> <meta charset="utf-8"> <title>How to Make a JavaScript Image Rollover</title> <!--JavaScript code goes here.--> <script language="javascript"> function MouseRollover(MyImage) { MyImage.src = "MyPicture2.jpg"; } function MouseOut(MyImage) { MyImage.src = "MyPicture1.jpg"; } </script> </head> <body> <div align="center"> <!--The rollover image displays here.--> <img src="MyPicture1.jpg" boarder="0px" width="650px" height="550px" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)" /> </div> </body> </html>

    , “index.html” is used to test the file.

    Select “Save as type” to HTML documents. ,, Click “File” and then go to “Preview in Browser.” Click “Firefox” or any Web browser being installed in your text editor.

  3. Step 3: Locate the <head></head> section.

  4. Step 4: Copy the following JavaScript code: <script language="javascript"> function MouseRollover(MyImage) { MyImage.src = "MyPicture2.jpg"; } function MouseOut(MyImage) { MyImage.src = "MyPicture1.jpg"; } </script>

  5. Step 5: Paste the JavaScript code in between the <head></head> section onto your text editor.

  6. Step 6: Locate the <body></body> section.

  7. Step 7: Copy the following code: <div align="center"> <!--The rollover image displays here.--> <img src="MyPicture1.jpg" border="0px" width="650px" height="550px" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)" /> </div>

  8. Step 8: Paste the code in between the <body></body> section.

  9. Step 9: Review the entire code.

  10. Step 10: Click “File” and select “Save.”

  11. Step 11: Enter a name to save your HTML document.

  12. Step 12: Click the “Save” button.

  13. Step 13: Preview the finished web page in a browser.

Detailed Guide

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.

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. , JavaScript code will be inserted within the <head></head> tag.

Two JavaScript functions will be created to change the images.

The two functions are named MouseRollover and MouseOut in the code below.

The image’s src property will be used to change the image’s source when those two functions are called. ,, The MyPicture2.jpg in the function MouseRollover should be replaced by your rollover image’s name and the MyPicture1.jpg in the function called MouseOut should be replaced by your original image’s name. , The image tag <image src=”FileName” Alt=”Title” boarder="0px" width="650px" height="550px"/> will be applied to display the rollover image.

In this example, the Alt=”Title” that refers to the image title’s name is omitted. ,, The onmouseover property is added inside the image tag above and will be assigned to call the JavaScript function Image Rollover to change your original image to a new rollover image.

Replace MyPicture1.jpg with your original image’s name.

Moreover, another property called onMouseOut is added in order to change the image back into its original one when you move your mouse away from the rollover image. , Your code should look similar to the code below.

You can play around with the code from this example and see how things change. <!doctype html> <html> <head> <meta charset="utf-8"> <title>How to Make a JavaScript Image Rollover</title> <!--JavaScript code goes here.--> <script language="javascript"> function MouseRollover(MyImage) { MyImage.src = "MyPicture2.jpg"; } function MouseOut(MyImage) { MyImage.src = "MyPicture1.jpg"; } </script> </head> <body> <div align="center"> <!--The rollover image displays here.--> <img src="MyPicture1.jpg" boarder="0px" width="650px" height="550px" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)" /> </div> </body> </html>

, “index.html” is used to test the file.

Select “Save as type” to HTML documents. ,, Click “File” and then go to “Preview in Browser.” Click “Firefox” or any Web browser being installed in your text editor.

About the Author

C

Cynthia Allen

Professional writer focused on creating easy-to-follow hobbies tutorials.

100 articles
View all articles
Share this guide: Twitter Facebook Email

Rate This Guide

--
Loading...
5
0
4
0
3
0
2
0
1
0

How helpful was this guide? Click to rate:

More from Other Guides

Related Guides