Creating Mouseover Images with JavaScript
-
Create two images you will use for your mouseover. These images must meet the following requirements:
- They must have the same dimensions (150x150 pixels, for example)
- They must be of the same file type (either both JPG or both GIF, but not one JPG and one GIF)
- Their file names must be identical, except the first image must have a "1" at the end of its name, and the second image must have a "2" at the end of its name (picture1.jpg and picture2.jpg, for example)
Here are the two images I will use for my mouseover and their respective file names:
myimage1.jpg
myimage2.jpg - Insert the first image into your web page. See this tutorial for in-depth instructions on how to do this.
- Left-click on the image that you have just inserted to highlight it, and click the Code button in the lower-left corner of the screen. A screen displaying HTML code will be displayed.
-
A certain portion of that code should be highlighted, resembling the following:
<img src="picture1.jpg"/>Edit this text so that it reads like so:
<img src="picture1.jpg" name="pic" border="0"/>
wheremouseoveris the unique name that you assign to that image. Note that no two images on the same page can share the same name. -
While still viewing the Code screen, scroll to the very top of the page. You should see the beginning of the HTML file, which will look similar to the code below:
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage XP 2003" />
<title>My Web Page Title</title>
</head>
<body>Position your cursor between the
</head>and<body>tags. -
Highlight the following code. Under the Edit menu in your web browser, choose Copy to copy the code to your Clipboard.
<!-- START COPYING HERE -->
<script type="text/javascript">
pic = new Image();
pic1 = new Image();
pic1.src = "picture1.jpg";
pic2 = new Image();
pic2.src = "picture2.jpg";
// CHANGE NOTHING BELOW THIS POINT!
function flip(pic, r)
{
if(r == 2)
{
source = eval(pic + "2.src");
document[pic].src = source;
}
if(r == 1)
{
source = eval(pic + "1.src");
document[pic].src = source;
}
}
function link()
{
}
</script> <!-- STOP COPYING HERE -->
-
Customize the bolded text before the
// CHANGE NOTHING BELOW THIS POINT!line according to the file names and picture names that are assigned to the images that you are using. Using the above example, the code would appear as follows:myimage = new Image();
myimage1 = new Image();
myimage1.src = "myimage1.jpg";
myimage2 = new Image();
myimage2.src = "myimage2.jpg"where
myimageis the unique name that I assigned to the mouseover image andmyimage1.jpg&myimage2.jpgare the two image files that will make up the mouseover. If you are using GIF files, make sure to replace the.jpgin both file names with.gif.
Note that JavaScript is case-sensitive. myimage, MyImage, MYIMAGE, etc. will all be recognized differently. Make sure your case usage is consistent.
- Return to the Design view by clicking the Design button in the lower-left corner of the screen. Once again, click the image that is being used in the mouseover to highlight it, and click the Code button in the lower-left corner of the screen to return to the HTML viewer.
-
Again, a portion of the code that will be highlighted. This is the code to which we added
name="pic" border="0"earlier. Now, add additional code so that it resembles the following:<a onMouseOver="javascript:flip('pic', 2)" onMouseOut="javascript:flip('pic', 1)" href="javascript:link()"><img src="picture1.jpg" name="pic" border="0"/></a>Replace the bolded text with the appropriate file name and image name that you have used up to this point. In the example shown above, the code would look like the following:
<a onMouseOver="javascript:flip('myimage', 2)" onMouseOut="javascript:flip('myimage', 1)" href="javascript:link()"><img src="myimage1.jpg" name="myimage" border="0"/></a>
- Your mouseover is now fully functional. To test it, click the Preview button in the lower-left corner of the screen. If you hover your mouse over the image on your page, it will change to the second image, and revert when you remove the mouse pointer.
Here is the example mouseover image that was created during this tutorial:
Adding Additional Mouseover Images to a Page
- Follow steps 1-6 in the tutorial above for each new image that you add. Make sure that each new image that is added has a different
name=value than every image that was added before it. -
For each new image that you added, copy and paste the following code immediately above the
// CHANGE NOTHING BELOW THIS POINT!line in the JavaScript code:pic = new Image();where
pic1 = new Image();
pic1.src = "pic1.gif";
pic2 = new Image();
pic2.src = "pic2.gif";
picis the name that you have given to the new image, andpic1.gif&pic2.gifare the file names for both images used in the mouseover. - Follow steps 8-10 in the tutorial above for each image that you add.
As an example, assume I have two images that I wish to make into a mouseover:
otherpic1.gif
|
otherpic2.gif
|
If I give it the name value otherpic, the JavaScript code that I will add for this new image would look as follows:
otherpic = new Image();
otherpic1 = new Image();
otherpic1.src = "otherpic1.jpg";
otherpic2 = new Image();
otherpic2.src = "otherpic2.jpg";
The image tags for the new mouseover would look like the following line of code:
<a onMouseOver="javascript:flip('otherpic', 2)" onMouseOut="javascript:flip('otherpic', 1)" href="javascript:link()"><img src="otherpic1.jpg" name="otherpic"/></a>
The completed mouseover image is shown below: