JavaScript code samples 12b
JavaScript onMouseOver and JavaScript onMouseOut switching images
>>> this example in Swedish
THREE PICTURES - THE THIRD IS DISPLAYED AT EVERY FIFTH MOUSEOVER.
PUT THE FOLLOWING WHERE YOU WANT THE PICTURE:
<A HREF = "URL"
onMouseOver = " iljswtch2(1,1)" 1
onMouseOut = " iljswtch2(0,0) "> 2
<IMG NAME = " switch1" 3
SRC= "image file" 4
WIDTH = "pixel"
HEIGHT = "pixel"
BORDER = "0"></A>
Replace my mail address, replace picture file by the name of the file you are going to use, replace pixel by the actual WIDTH and HEIGHT of the picture and remove all footnotes above.
Pu the rest of the code in the HEAD part of the document (see MINIMANUAL 1 basics). The first part of the code preloads the images and then there is the function that displays a new picture when it is called:
<SCRIPT LANGUAGE=" JavaScript "
TYPE=" text/javascript ">
<!--
if(document.images) //5
{
bild = new Array()
bild[0]= new Image()
bild[1]= new Image()
bild[0].src= "picture file" //13
bild[1].src= "picture file" //14
}
iljover=0 //6
function iljswtch2(iljnumber,inb)
{
if(document.images)
{
if(inb==1) //7
{
iljover = iljover+1 //8
}
document.switch1.src = bild[iljnumber].src //3,9
if(iljover==5) //10
{
document.switch1.src = "picture file" //3,11
iljover=0 //12
}
}
}
// -->
</SCRIPT>
1 this is where the function iljswtch2() is called - the arguments are 1 (iljnumber) and 1 (inb, i e a mouseover has taken place, not a mouseout)
2 this is where the function iljswtch2() is called - the arguments are 0 (iljnumber) and 0 (inb, i e a mouseout has taken place)
3 give the image a name
4 the picture that is showed when the page is loaded, before any mouseover has taken place
5 the following lines preload the images - you can, of course, pre-load the third picture too
6 iljover keeps track of the number of MouseOvers that has occurred; here iljover is initially set to 0
7 if inb equals 1, i e if there has been a mouseover, then...
8 iljover is increased by 1
9 this is where the "normal" switch of images takes place but...
10 if iljover equals 5, i e after five mouseovers then...
11 the third picture is shown and ...
12 iljover is reset to 0
13 the picture to show at onmouseout
14 the picture to show at onmouseover
Don´t forget to remove the footnotes in the IMG tag!
Instead of using the NAME attribute of the IMG tag to identify the image you can replace the lines
document.switch1.src
by
document.images[i].src
If the image is the very first image on the page i should be replaced by 0, if the image is the second image on the page i should be replaced by 1 etc.
OTHER JAVASCRiPT EXAMPLES
How to use javascript to choose what image to show by selecting it in an option list How to use javascript to switch images How to use javascript to switch images onmouseover JavaScript getDay() and document.write JavaScript date JavaScript timer How to use javascript to switch images onmouseover JavaScript timer JavaScript onmouseover JavaScript lastModified JavaScript/ text in text area JavaScript/ text in text area how to open new windows in JavaScript JavaScript clock JavaScript confirm JavaScript alert JavaScript prompt JavaScript onmouseover JavaScript onmouseover2 JavaScript animation JavaScript animation 2Page by
ilj@flowsim.se
Last modified: August 15, 1998
This page should be part of a frames system
at
http://www.flowsim.se
JAVASCRiPT