Basic JavaScript Rollovers by Joe Maller

JavaScript Rollovers (image replacement) by Joe Maller

This is the second revision of this page. It was first posting in November of 1996 and since then has received many thousands of hits, I've received hundreds of e-mail messages and the whole page was reproduced in Lynda Weinman's best selling book <designing web graphics.2> on pages 392-394.

I've written several variations of this rollover:

Multiple Image Rollovers
Random Rollovers
Sequentially Progressive Rollovers

How It Works

Beginning The Script

A script can be placed anywhere in the HTML document, but it's usually put inside the <HEAD> tags, just after the document's <TITLE> tagset.

The first part of a simple HTML page with space for a JavaScript looks like this:

<HTML>
<HEAD>
<TITLE>
  Basic JavaScript Rollovers by Joe Maller
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
   
</SCRIPT>
</HEAD>

The tags <SCRIPT LANGUAGE="JavaScript"></SCRIPT> set the script apart from the rest of the document. It's also a good idea to enclose the entire script in an HTML comment. That exempts the script code from accidentally displaying on older browsers.

Comments are ignored information. They often serve as notes to the author about the workings of certain code. HTML's syntax for comments is . Everything between the start and end arrows is ignored by the browser. In JavaScript, two slashes // indicate that all text that follows on the same line is ignored. Comments can say anything, I usually entertain myself by replacing the "hide/stop hiding..." text with something more interesting.

Declaring Images in the Script


The first step to creating the rollover is to tell JavaScript about the images to be used, this causes the images to load before they are visible. Once the images are loaded into memory image swaps can happen instantaneously.

It is possible to have a rollover without declaring the images but before the images can change the browser must first open a new connection and load the second image. This process usually takes long enough even on fast connections to make the rollover less effective.

To preload the images, each is declared in two lines of an array. Arrays are like mini files, storing several pieces of information all in one place. Our array, named Rollimage[], will store the image locations (sources) and the sizes.:

  Rollimage[0]= new Image(100,150)
  Rollimage[0].src = "your_image.gif"
  Rollimage[1] = new Image(100,150)
  Rollimage[1].src = "your_other_image.gif"

Each image should have two lines The first line states the image's size and the second sets the image's file name. The two numbers inside the parentheses refer to the width and height of the image, in that order. My images are in the same folder as the HTML file so they can be addressed with only their name, a non local image would have its full URL in the second line.

Early versions of JavaScript were case sensitive. The newest version claims to be partly case sensitive but the boundaries of when it is and isn't are unclear. To be on the safe side, be sure to refer to your variables and arrays with consideration of case. TheDog is not the same as thedog.

Naming Image Objects

To replace an image JavaScript needs a way to identify which image to replace. Do this by including a name attribute in the <IMG...> tag or learning to refer to images in JavaScript's Array syntax:

  document.images[2]

The browser counts every image on a page and refers to them numerically starting from the first image. The above refers to the third image tag in the HTML document (you're programming now, zero counts first).

I've found named images easier to keep track of so that's what I've done in this example. The following image is named "Rupert":

  <IMG NAME="Rupert" SRC="some.gif">

avaScript can't activate a rollover in a plain image tag. To create a rollover, the hot object must be a link. This is the HTML code for the changing image:

<A HREF="link.html"
  onMouseOver="SwapOut()"
  onMouseOut="SwapBack()">
<IMG NAME="Rupert"
  SRC="your_image.gif"
  WIDTH=100
  HEIGHT=150>
</A>

What's "onMouseOver"?

onMouseOver and onMouseOut are event handlers, they tell JavaScript what to do when an event occurs. The mouse cursor passing over the linked image is defined as an event because of these bits of code. onMouseOver="blorg()" would tell JavaScript to execute the function blorg().

Functions (Almost done!)

Functions are a predefined set of commands that JavaScript only executes when called, they are usually defined in the first <SCRIPT> section of the document. The standard format for defining a function is:

function SwapOut() {
  document.Rupert.src = Rollimage[1].src; return true;
}

That function's name is SwapOut(). The parentheses can be used in more complex scripts to send data that the function will work with. The guts of the function are written between the {} brackets.

SwapOut() tells the Rupert image's src attribute to equal Rollimage[1].src, which is the second image. In english; it changes the source of the Rupert image. The other function in this document is almost the same as SwapOut() except that it switches back to the first image.

Putting It All Together

That's basically it. Following is the complete code for simple document that changes images. Try it out.

<HTML>

<HEAD>
<TITLE>
  Basic JavaScript Rollover by Joe Maller
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
  
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<P>
<A HREF="http://www.joemaller.com/"
  onmouseover="SwapOut()"
  onmouseout="SwapBack()">
<IMG
  NAME="Rupert"
  SRC="joe_open.jpg"
  WIDTH=121
  HEIGHT=153
  BORDER=0>
</A>
</P>
  If you use this, please give me credit.
</CENTER>
</BODY>
</HTML>

Notes and Problems

Browser Support - This script will not work with versions of Microsoft Internet Explorer (MSIE) before 4.0. Version 4.0 is the first complete implementation of JavaScript in MSIE. Rollovers are also not possible in version of Netscape Navigator before 3.0. There is absolutely no way to make a JavaScript rollover work in any of the aforementioned browsers.

LOWSRC - If you use a Low Source in your image tags, you might experience unwanted reloads of the LOWSRC image before every swap.

Image Size - The size of the image is set by the image you will be replacing. Replacement images will be stretched to fit.

Feedback

Please let me know if this page helped you or if the code is in use somewhere.

If you have any problems or suggestions, please write.

joe@joemaller.com

Back | JavaScript

Last Updated: 2-20-98


Beginning The Script
	A script can be placed anywhere in the HTML document, but it's usually put inside the <HEAD> tags, just after the document's <TITLE> tagset. The first part of a simple HTML page with space for a JavaScript looks like this: <HTML> <HEAD> <TITLE> Basic JavaScript Rollovers by Joe Maller </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Hide from old browsers (the JavaScript will go here) // Stop hiding from old browsers --> </SCRIPT> </HEAD> The tags <SCRIPT LANGUAGE="JavaScript"></SCRIPT> set the script apart from the rest of the document. It's also a good idea to enclose the entire script in an HTML comment. That exempts the script code from accidentally displaying on older browsers. Comments are ignored information. They often serve as notes to the author about the workings of certain code. HTML's syntax for comments is <!-- words -->. Everything between the start and end arrows is ignored by the browser. In JavaScript, two slashes // indicate that all text that follows on the same line is ignored. Comments can say anything, I usually entertain myself by replacing the "hide/stop hiding..." text with something more interesting.
Declaring Images in the Script
	The first step to creating the rollover is to tell JavaScript about the images to be used, this causes the images to load before they are visible. Once the images are loaded into memory image swaps can happen instantaneously. It is possible to have a rollover without declaring the images but before the images can change the browser must first open a new connection and load the second image. This process usually takes long enough even on fast connections to make the rollover less effective. To preload the images, each is declared in two lines of an array. Arrays are like mini files, storing several pieces of information all in one place. Our array, named Rollimage[], will store the image locations (sources) and the sizes.: Rollimage[0]= new Image(100,150) Rollimage[0].src = "your_image.gif" Rollimage[1] = new Image(100,150) Rollimage[1].src = "your_other_image.gif" Each image should have two lines The first line states the image's size and the second sets the image's file name. The two numbers inside the parentheses refer to the width and height of the image, in that order. My images are in the same folder as the HTML file so they can be addressed with only their name, a non local image would have its full URL in the second line. Early versions of JavaScript were case sensitive. The newest version claims to be partly case sensitive but the boundaries of when it is and isn't are unclear. To be on the safe side, be sure to refer to your variables and arrays with consideration of case. TheDog is not the same as thedog.
Naming Image Objects
	To replace an image JavaScript needs a way to identify which image to replace. Do this by including a name attribute in the <IMG...> tag or learning to refer to images in JavaScript's Array syntax: document.images[2] The browser counts every image on a page and refers to them numerically starting from the first image. The above refers to the third image tag in the HTML document (you're programming now, zero counts first). I've found named images easier to keep track of so that's what I've done in this example. The following image is named "Rupert": <IMG NAME="Rupert" SRC="some.gif"> avaScript can't activate a rollover in a plain image tag. To create a rollover, the hot object must be a link. This is the HTML code for the changing image: <A HREF="link.html" onMouseOver="SwapOut()" onMouseOut="SwapBack()"> <IMG NAME="Rupert" SRC="your_image.gif" WIDTH=100 HEIGHT=150> </A>
What's "onMouseOver"?
	onMouseOver and onMouseOut are event handlers, they tell JavaScript what to do when an event occurs. The mouse cursor passing over the linked image is defined as an event because of these bits of code. onMouseOver="blorg()" would tell JavaScript to execute the function blorg().
Functions (Almost done!)
	Functions are a predefined set of commands that JavaScript only executes when called, they are usually defined in the first <SCRIPT> section of the document. The standard format for defining a function is: function SwapOut() { document.Rupert.src = Rollimage[1].src; return true; } That function's name is SwapOut(). The parentheses can be used in more complex scripts to send data that the function will work with. The guts of the function are written between the {} brackets. SwapOut() tells the Rupert image's src attribute to equal Rollimage[1].src, which is the second image. In english; it changes the source of the Rupert image. The other function in this document is almost the same as SwapOut() except that it switches back to the first image.
Putting It All Together
	That's basically it. Following is the complete code for simple document that changes images. Try it out. <HTML> <HEAD> <TITLE> Basic JavaScript Rollover by Joe Maller </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- hide from none JavaScript Browsers Rollimage[0]= new Image(121,153) Rollimage[0].src = "joe_open.jpg" Rollimage[1] = new Image(121,153) Rollimage[1].src = "joe_blink.jpg" function SwapOut() { document.Rupert.src = Image[1].src; return true; } function SwapBack() { document.Rupert.src = Image[0].src; return true; // - stop hiding --> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <CENTER> <P> <A HREF="http://www.joemaller.com/" onmouseover="SwapOut()" onmouseout="SwapBack()"> <IMG NAME="Rupert" SRC="joe_open.jpg" WIDTH=121 HEIGHT=153 BORDER=0> </A> </P> If you use this, please give me credit. </CENTER> </BODY> </HTML>
Notes and Problems
	Browser Support - This script will not work with versions of Microsoft Internet Explorer (MSIE) before 4.0. Version 4.0 is the first complete implementation of JavaScript in MSIE. Rollovers are also not possible in version of Netscape Navigator before 3.0. There is absolutely no way to make a JavaScript rollover work in any of the aforementioned browsers. LOWSRC - If you use a Low Source in your image tags, you might experience unwanted reloads of the LOWSRC image before every swap. Image Size - The size of the image is set by the image you will be replacing. Replacement images will be stretched to fit.
Feedback
	Please let me know if this page helped you or if the code is in use somewhere. If you have any problems or suggestions, please write. joe@joemaller.com