JavaScript code samples 62 - how to switch images onMouseOver

©ilj@flowsim.se
JavaScript code samples 62
JavaScript onmouseover and onmouseout
- move the mouse pointer over the links
>>> this example in Swedish

AEROPLANES!

BEETLES!

CARS!

FISHES!

code & explanations below

In this example different pictures are displayed
depending on which link the mousepointer is moved across;
all pictures are displayed in the same spot.

1
Put an image on the page:

This is what the IMG tag could look like:

<IMG SRC= "basbild.gif"
NAME="imagedisplay"
WIDTH = "99"
HEIGHT = "95">

2
The IMG tag is named
imagedisplay

and this is where the various pictures are to be displayed when the mouse pointer moves over the text links.

In this example one of the new pictures looks like this:

And another one looks like this:

The new pictures are to be displayed instantly when the mouse pointer moves in over a link; once the page is properly loaded the user should not have to wait for the new picture to finish loading when he or she moves the cursor over the link.

To achieve this you have got to preload the image files, i e make sure the images are loaded at the same time as the page itself.
This is how that could be done:

bild=new Array()
bild[0]= new Image()
bild[0].src="mainpicture.gif"
bild[1]= new Image()
bild[1].src="mypicture1.gif"
bild[2]= new Image()
bild[2].src="mypicture2.gif"

The code above preloads three pictures, namely the image files
mainpicture.gif
(that is to be displayed when the mouse pointer is not over a link)
and
mypicture1.gif
mypicture2.gif
(which are two of the new pictures).

These pictures are loaded together with the page but they will not become visible until they are called for. Just continue this list to preload any number of images.

3
Put the text links on the page. Something like this:

<A HREF="URL här"
ONMOUSEOVER="iljswtch(1)"
ONMOUSEOUT="iljswtch(0)">TEXT 1</A>
<A HREF="URL här"
ONMOUSEOVER="iljswtch(2)"
ONMOUSEOUT="iljswtch(0)">TEXT 2</A>

When the mouse pointer is moved in over one of the links above (and a JavaScript mouseover thus occurs) or when the mouse pointer leaves one of the links above (and a JavaScript mouseout occurs) a function here named iljswtch() is called.

When the mouse pointer is moved in over the first link the function iljswtch() is called with 1 within parentheses (as argument or parameter), like this:

iljswtch(1)

When the mouse pointer leaves the first link the function iljswtch() is called with 0 within parentheses, like this:

iljswtch(0)

The number within parentheses tells the function WHICH picture to show.
A 0 tells the function that the picture to show is the one preloaded as bild[0].src.
A 1 tells the function that the picture to show is the one preloaded as bild[1].src.

This is what the function looks like:

function iljswtch(picturenumber)
{
document.imagedisplay.src=bild[picturenumber].src
}

The number within parentheses enters the function as

picturenumber

If the number is 0 the one line of the function (ie the line that makes a new picture appear at the IMG tag imagedisplay)
will read

document.imagedisplay.src=bild[0].src

and the picture shown will thus be the one that was preloaded as bild[0].src

This code does not work everywhere; you should thus find out if the browser where the page is viewed supports switching images and place the code in an if statement.

The final JavaScript code could look something like this:

<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">

</SCRIPT>

The Javascript code should be put somewhere between the HEAD tags (see MINIMANUAL 1 basics).

You do not have to use the NAME attribute of the IMG tag. You can replace the code line
document.imagedisplay.src
by
document.images[i].src
and remove NAME="imagedisplay" from the IMG tag. The i within the sqaure brackets should then be replaced by 0 if the IMG tag where you are going to display the pictures is the first IMG tag on the page, by 1 if it is the second IMG tag on the page etc.

OTHER JAVASCRiPT EXAMPLES