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
|