How to Make a JavaScript Image Rollover

PDF download Download Article
PDF download Download Article

JavaScript is the most popular lightweight scripting language which works in the major browsers such as Internet Explorer, Chrome, Safari, Firefox, and Opera. It is also easy to use to build a dynamic and interactive website. One of its useful functionalities is image rollover that is changing an image into another image when a mouse hovers over the original image. Then the new image will change back to the original one when the mouse moves away. This article will show you how to do just that step by step; therefore, knowing some basic HTML and JavaScript is required.

Webpage Example

{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/Rollover-screenshot-1.png\/460px-Rollover-screenshot-1.png","bigUrl":"\/images\/thumb\/0\/09\/Rollover-screenshot-1.png\/728px-Rollover-screenshot-1.png","smallWidth":460,"smallHeight":245,"bigWidth":728,"bigHeight":387,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}

Steps

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8e\/1994753-1-1.jpg\/v4-460px-1994753-1-1.jpg","bigUrl":"\/images\/thumb\/8\/8e\/1994753-1-1.jpg\/aid1994753-v4-728px-1994753-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c2\/1994753-2-1.jpg\/v4-460px-1994753-2-1.jpg","bigUrl":"\/images\/thumb\/c\/c2\/1994753-2-1.jpg\/aid1994753-v4-728px-1994753-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    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.
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/1994753-3-1.jpg\/v4-460px-1994753-3-1.jpg","bigUrl":"\/images\/thumb\/2\/24\/1994753-3-1.jpg\/aid1994753-v4-728px-1994753-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    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.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/02\/1994753-4.jpg\/v4-460px-1994753-4.jpg","bigUrl":"\/images\/thumb\/0\/02\/1994753-4.jpg\/aid1994753-v4-728px-1994753-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"} 


     < 
 script 
 language 
 = 
 "javascript" 
 > 
 function 
 MouseRollover 
 ( 
 MyImage 
 ) 
 { 
 MyImage 
 . 
 src 
 = 
 "MyPicture2.jpg" 
 ; 
 } 
 function 
 MouseOut 
 ( 
 MyImage 
 ) 
 { 
 MyImage 
 . 
 src 
 = 
 "MyPicture1.jpg" 
 ; 
 } 
 < 
 /script>
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/1994753-5-1.jpg\/v4-460px-1994753-5-1.jpg","bigUrl":"\/images\/thumb\/4\/40\/1994753-5-1.jpg\/aid1994753-v4-728px-1994753-5-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    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. [1]
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/63\/1994753-6-1.jpg\/v4-460px-1994753-6-1.jpg","bigUrl":"\/images\/thumb\/6\/63\/1994753-6-1.jpg\/aid1994753-v4-728px-1994753-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    The image tag <image src=”FileName” Alt=”Title” boarder="0px" width="650px" height="550px"/> will be applied to display the rollover image. [2] In this example, the Alt=”Title” that refers to the image title's name is omitted.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/62\/1994753-7.jpg\/v4-460px-1994753-7.jpg","bigUrl":"\/images\/thumb\/6\/62\/1994753-7.jpg\/aid1994753-v4-728px-1994753-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"} 
     < 
 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. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2c\/1994753-8-1.jpg\/v4-460px-1994753-8-1.jpg","bigUrl":"\/images\/thumb\/2\/2c\/1994753-8-1.jpg\/aid1994753-v4-728px-1994753-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    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. [3]
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d0\/1994753-9-1.jpg\/v4-460px-1994753-9-1.jpg","bigUrl":"\/images\/thumb\/d\/d0\/1994753-9-1.jpg\/aid1994753-v4-728px-1994753-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    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 
 >
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/33\/1994753-10-1.jpg\/v4-460px-1994753-10-1.jpg","bigUrl":"\/images\/thumb\/3\/33\/1994753-10-1.jpg\/aid1994753-v4-728px-1994753-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    ”
  11. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5d\/1994753-11-1.jpg\/v4-460px-1994753-11-1.jpg","bigUrl":"\/images\/thumb\/5\/5d\/1994753-11-1.jpg\/aid1994753-v4-728px-1994753-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    “index.html” is used to test the file. Select “Save as type” to HTML documents.
  12. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/92\/1994753-12-1.jpg\/v4-460px-1994753-12-1.jpg","bigUrl":"\/images\/thumb\/9\/92\/1994753-12-1.jpg\/aid1994753-v4-728px-1994753-12-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
  13. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/63\/1994753-13-1.jpg\/v4-460px-1994753-13-1.jpg","bigUrl":"\/images\/thumb\/6\/63\/1994753-13-1.jpg\/aid1994753-v4-728px-1994753-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Click “File” and then go to “Preview in Browser.” Click “Firefox” or any Web browser being installed in your text editor.
    14. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • Be sure to put your saved HTML file at the same location where your two images are.
        Thanks
      • Save your HTML document more often during your work.
        Thanks
      • Another option to preview the finished web page in a browser is that you can click your browser icon in the folder where you keep your work to display the web page. In the screenshot, the default html file is in Dreamweaver, you can right click and select your browser being installed on your computer.
        Thanks
      Show More Tips
        Show More Tips
        Submit a Tip
        All tip submissions are carefully reviewed before being published
        Submit
        Thanks for submitting a tip for review!
        Advertisement

        Things You'll Need

        • a computer
        • any text editor program
        • an Internet browser
        • two different images

        You Might Also Like

        How to
        Learn HTML
        How to
        Insert Images with HTML
        How to
        Enable JavaScript
        How to
        Enable Webgl
        How to
        Use JavaScript Injections
        How to Enable JavaScript in a Browser on a Mac
        How to
        Disable JavaScript
        How to
        Program Using Javascript
        How to
        Enable JavaScript in Mozilla Firefox
        How to
        Change Button Color in Javascript
        Simple Ways to Create a Javascript Console in Sublime Text
        How to
        Enable JavaScript in Internet Explorer
        4 Ways to Print in JavaScript: Console, Window Alert, & More
        How to Code an Alert with a Variable Using Javascript
        Advertisement

        References

        1. ↑ https://youtu.be/AiiXLmqhndU?t=41
        2. ↑ https://youtu.be/AiiXLmqhndU?t=64
        3. ↑ https://youtu.be/AiiXLmqhndU?t=112

        About This Article

        Thanks to all authors for creating a page that has been read 222,875 times.

        Is this article up to date?

        Advertisement