Download ArticleDownload ArticleX
How.com.vn is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, 23 people, some anonymous, worked to edit and improve it over time.
This article has been viewed 222,341 times.
Learn more...
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
Steps
Download Article
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.
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.Advertisement
Locate the <head></head> section. 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.
Copy the following JavaScript code:<script language="javascript">function MouseRollover(MyImage) { MyImage.src = "MyPicture2.jpg"; }function MouseOut(MyImage) { MyImage.src = "MyPicture1.jpg"; }</script>
Paste the JavaScript code in between the <head></head> section onto your text editor. 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]
Locate the <body></body> section. 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.
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>
Paste the code in between the <body></body> section. 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]
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.<!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>
Click “File” and select “Save.”
Enter a name to save your HTML document. “index.html” is used to test the file. Select “Save as type” to HTML documents.
Click the “Save” button.
Preview the finished web page in a browser. Click “File” and then go to “Preview in Browser.” Click “Firefox” or any Web browser being installed in your text editor.
Advertisement
Expert Q&A
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
SubmitAdvertisement
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
Submit a Tip
All tip submissions are carefully reviewed before being published
Thanks for submitting a tip for review!
Advertisement
Things You'll Need
- a computer
- any text editor program
- an Internet browser
- two different images
References
About This Article
Thanks to all authors for creating a page that has been read 222,341 times.
Is this article up to date?
⚠️ Disclaimer:
Content from Wiki How English language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
Advertisement
