A rollover is when a user moves the mouse pointer over an image on a Web page the image is replaced with a new image. The simplest rollover can be created with the html code provided in this article.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Rollovers

A rollover is when a user moves the mouse pointer over an image on a Web page the image is replaced with a new image. The simplest rollover can be created with the html code below.

<img name="rollover" src="out.gif"
onMouseover="document.images.rollover.src="over.gif"
onMouseout="document.images.rollover.src="out.gif">

This code responds to the browser's onMouseover and onMouseout events. it assumes that the images out.gif and over.gif are in the same directory as the html page containing the code. The images should be the same size.

This simple rollover has a minor problem. The second image is not downloaded from the server until the first time the user moves the mouse pointer over the first image. There would be some delay before the first image is replaced.

To make the second image appear immediately, you need to preload it. To preload images, assign them to Java Script Image objects in the HEAD section of your web page. This can be done using the code shown below.

<head>
<script language="JavaScript">
out = new Image;
over = new Image;
out.src="out.gif";
over.src="over.gif";
</script>
</head>

Then the rollover code in the body of the web page can get the images from the Java Script Image objects, as shown below.

<body> 
<img name="rollover" src="out.gif"
onMouseover="document.rollover.src=over.src"
onMouseout="document.rollover.src=out.src">

</body>

The example rollover shown below could be used as a menu button. It uses three different images in response to four different mouse events. In this example, the rollover is used as a graphics link.

The code is shown below.

<html>
<head>
<script language="JavaScript">

out = new Image;
over = new Image;
down = new Image;

out.src = "out.gif";
over.src = "over.gif";
down.src = "down.gif"; 

</script>

</head>
<body>

<a alt="Rollover Code" target="top" href="rollcode.htm"
onMouseover="document.menu.src=over.src" 
onMouseout="document.menu.src=out.src"
onMousedown="document.menu.src=down.src"
onMouseup="document.menu.src=over.src">

<img border=0 width=76 height=38 name="menu" src="out.gif"></a>

</body>
</html>

To use the example code on your own Web page, just copy the code from the popup window and paste it into your own Web page. Create yuor own images or right-click on each image below and select "save Picture As..." in the popup menu that appears.

Simple rollovers are extremely easy to create, however in order to avoid a delay in the appearance of the replacement image, you should preload the rollover images into Java Script Image objects in the HEAD section of your Web page.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268