Build a website with javascript games and other dynamic content

Step four - Change images on mouse events

A mouse over and mouse out event in a link can also be very useful when the link is around a image. This would indicate to the script whether the mouse is on a image or not. To show that to the user as well you could change the image. So the user knows where he or she is about to click on.

When you point at the image it will change color, because it loads different images on mouse over and mouse out. link around the image looks as follows:

<a href="step4.htm"

onmouseover="change_image('pix/2on.gif')"

onmouseout="change_image('pix/2.gif')">

<img src="pix/2.gif" height=52 width=53  

border="0" name="name_of_image"></a>

As you can see for both events the same script was called. Again the difference is only that the function is called with a different value. In the script the passed value is hold in the variable image_url which is then assign to the source of the image to change it.

<script>

function change_image(image_url)

{

if (! (document.images)) return;

document.images['name_of_image'].src=image_url;

}

</script>



Before assign the value to be the new source for the image I do check whether the browser even knows image objects. If it does not know how to handle images and I would assign the value it would produce an error message. This would happen for example in Netscape 2 and Explorer 3. In these cases I rather return to do nothing.

it is also possible to read the source of an image

URL_of_image_source=document.images['name_of_image'].src
but this returns the complete URL although you might only be interested in the last bit which is the actual filename.

l=URL_of_image_source.length

filename=URL_of_image_source.substring(l-13,l)

if (filename=="greendot.gif") return true

return false

sp you look for the total length of the URL and copy then the number of characters you need off from the end the URL. This can then be compared in an if test.

Next step

 

AK
Start

My Games

Get Games

Build Games
space
1 - simple javascripts
2 - change form values
3 - statusbar & mouse
4 - change images
5 - preload images
6 - change location
7 - open/close windows
8 - other sources

Feedback or Questions

about me

 
 

Copyright by Armin Kielack 1998 last modified: