JavaScript code samples 12a
JavaScript onMouseOver and JavaScript onMouseOut
move the cursor over the black square
>>> this example in Swedish
>>> this example in French
code & explanations below
Put the following where you want the picture to be. Replace "javascript:void(0)" with a URL or mailto-code.
<A HREF = "javascript:void(0)"
onMouseOver = "iljswitch(1)"1
onMouseOut = "iljswitch(0)">2
<IMG NAME = "switch1"3
SRC = "imagefile"
WIDTH = "pixel"
HEIGHT = "pixel"
BORDER = "0"></A>
Set the WIDTH and the HEIGHT of the image (ie replace pixel by relevant numbers), replace imagefile by the name of the image file you are going to use and remove all footnotes.
1 when the mouse pointer is moved in over the picture the function iljswitch is called with the argument or parameter 1 , ie 1 enters the function as nummer and the picture that will be displayed is the one that was preloaded as bild[1].src More about preloading the images further down.
2 when the mouse pointer leaves the picture the function iljswitch is called with the argument 0 , ie 0 enters the function as nummer and the picture that will be displayed is the one that was preloaded as bild[0].src
3 name the image; the NAME will be used by the java script to keep track of WHERE to display the new picture
Put the following javascript code in the HEAD portion of the document (i.e. somewhere between the HEAD tags). The first part of this code preloads the images and then there is the function that displays a new picture when called:
<SCRIPT LANGUAGE=" JavaScript "
TYPE=" text/javascript">
<!--
if(document.images)
{
bild = new Array()
bild[0]= new Image() //4
bild[1]= new Image() //5
bild[0].src = "first image file" //4
bild[1].src = "second image file" //5
}
function iljswitch(nummer)
{
if(document.images)
{
document.switch1.src = bild[nummer].src //6
}
}
// -->
</SCRIPT>
4 the image, that is to be displayed when the mouse pointer is not over the link, is preloaded
5 the image, that is to be displayed when the mouse pointer is over the link, is preloaded
6 this line displays a new picture at the image named switch1 ; what picture to display depends on whether the event was a mouseover or a mouseout. If the event was a mouseover nummer will be replaced by 1 and the picture that will be displayed is the one that was preloaded as bild[1].src
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 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