JavaScript på svenska 69
JavaScript onmouseover & onmouseout
code and explanations below
this page has moved to javascript onmouseover.html
>>> this example in Swedish
MASTERMIND
TETRIS
When the mouse pointer is moved in over a text link (e g TANGRAM) and a mouseover thus occurs new pictures are displayed everywhere. The black-and-white picture of a TANGRAM piece is replaced by a blue picture of the same piece and the other pictures are replaced by "faded out" versions.
The same thing happens when the mouse pointer is moved in over an image: all three pictures are replaced by new ones.
Thus three different pictures are displayed at each spot.
This is what the three TANGRAM pictures look like:
First of all you have got to preload the pictures. If you do not do this the images will not start loading until a mouseover occurs.
Here is a piece of code that preloads two image files, one named test.gif and another one named test8.gif
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
if(document.images)
{
bild=new Array()
bild[0]=new Image()
bild[0].src="test.gif"
bild[1]=new Image()
bild[1].src="test8.gif"
}
//-->
</SCRIPT>
This preloads the images and you can now refer to test.gif as bild[0].src; while the image test8.gif could be referred to as bild[1].src. To preload more images all you have to do is continue the list; code for proloading a third image could look like this:
bild[2]=new Image()
bild[2].src="anotherone.gif"
Put this part of the code in the HEAD part of the document (se MINIMANUAL 1 basics).
One function is all you need to switch the images; this is what it looks like:
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
function iljbyte(bildplats,bildattvisa)
{
if(document.images)
{
document.images[bildplats].src=bild[bildattvisa].src
}
}
//-->
</SCRIPT>
Put the funcion in the HEAD part of the document (se MINIMANUAL 1 basics). Do not change anything in the function!
This function displays a new image at one spot each time it is called. WHAT picture to display and WHERE to display it is determined by the information passed to the function in the calls.
The call consist of the name of the function, in this example
iljbyte()
The information about WHAT picture to display and WHERE to display it is put within parentheses - iljbyte(here!) -
and the call is put after onMouseOver and after onMouseOut.
The IMG tags are put on the page using HTML looking something like this:
<A HREF="#"
ONMOUSEOVER="iljbyte('bildplats2',3);
iljbyte('bildplats1',2);
iljbyte('bildplats3',8)"
ONMOUSEOUT="iljbyte('bildplats2',4);
iljbyte('bildplats1',0);
iljbyte('bildplats3',6)">
<IMG SRC="test1.gif"
BORDER="0"
NAME="bildplats2"
WIDTH="pixels"
HEIGHT="pixels"
ALT=""></A>
The three IMG tags in this example are named bildplats1, bildplats2 and bildplats3, like this
IMG NAME="bildplats1"
When a MouseOver occurs the function iljbyte() is called, the NAME of the IMG tag and the number of the picture within parentheses, like this - iljbyte('bildplats2',3).
This means that the function will display the picture preloaded as bild[3].src at the IMG tag named bildplats2.
Since there are three IMG tags in this example the function has to be called three times when there is a onMouseOver and three times when there is a MouseOut.
Changes you have got to make?
Set the WIDTH and HEIGHT of the images and fill in the SRC of the images in the IMG tags.
If you want a border around the images you can change the number after BORDER; 10 would create a frame that is 10 pixels wide. The colour of the frame is the same as that of the text links.
Give each IMG tag a unique NAME.
Make sure that all the images you are going to use are preloaded!
Do not change anything in the function!
Put an adequate number of calls after each onMouseOver and onMouseOut and fill in the numbers of the picture to show.
If you do not want to use the NAME attribute of the IMG tags you can always use
document.images[0].src
to display a new picture at the very first IMG tag of the page,
document.images[1].src
to display a new picture at the second IMG tag of the page 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
Page by
ilj@flowsim.se
Last modified: September 21, 1999
This page should be part of a frames system
at:
http://www.flowsim.se