How to Make an Image Change on Mouseover
Whether you're creating or customizing, mouseover images can add flair and a "magical" quality to your website. Adding the ability to make images change by hovering over them with your computer's mouse is not too time-consuming, but it does require a bit of custom code. Implementing mouseover (or rollover) images uses simple HTML and JavaScript codes -- both of which are universal computer coding languages, easy to implement in any webpage.
Other People Are Reading
Instructions
-
-
1
Open the HTML page you would like to add the image rollover (or mouseover) in, using a valid HTML or text editor.
-
2
Paste the following code within your HTML page (within the <body> </body> tags of the page's code):
"<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>"
-
-
3
Upload the images you would like to use with your image rollover (two required) to your website's host or to a free image host, such as Imgur (imgur.com), Image Shack (imageshack.us) or Photobucket (photobucket.com).
-
4
Locate the place in your page's file that you would like to have your image rollover appear and copy and paste (by pressing "CTRL", "C" simultaneously on your computer keyboard to copy and "CTRL", "V" to paste) the following code:
"<A
HREF="TARGETLINK.html"
onMouseOver = "rollover('NAMEOFROLLOVER')"
onMouseOut = "rollout('NAMEOFROLLOVER')"
><IMG
SRC="YOURFIRSTIMAGEURL"
NAME="NAMEOFROLLOVER"
ALT="Alternative Text" BORDER=0
HEIGHT=150 WIDTH=150
></A>
<SCRIPT TYPE="text/javascript">
<!--
setrollover("ROLLOVERIMAGEURL");
//-->
</SCRIPT>"
-
5
Change the variables in the code to suit your images and web links.
-
6
Replace "TARGETLINK.html" with the website or page the rollover image will link to. Give the rollover image a specific name and replace "NAMEOFROLLOVER" with the name you choose. Replace "YOURFIRSTIMAGEURL" with the image URL of the photo you would like visible before the mouse rollover. Change "ROLLOVERIMAGEURL" to the image after a computer mouse hovers the image. Edit the height and width of the image by changing "150" to the proper amount of pixels your photo is.
-
7
Save the HTML page and re-upload it to your website's server.
-
1
Tips & Warnings
Visit free HTML tutorial websites online to learn additional HTML tricks for image rollovers, buttons and hyperlinks. Some well-known websites such as W3 Schools (w3schools.org) Echo Echo (echoecho.com), and Quack It (quackit.com) include vast directories of various types of Internet programming tutorials.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
