Part 5 - Link Events, Image Swaps & The Taskbar
In this part I will show you how to use link events, do image swaps and display things in the browser status bar.
They can have many different uses but the most common is for image swaps (mouseover images).
onClick works in exactly the same way as a standard HTML link. It is executed when someone clicks on a link in a page. It is inserted as follows:
onMouseOver and onMouseOut
onMouseOver and onMouseOut work in exactly the same way as onClick except for one major difference with each.
onMouseOver, as the name suggests, will execut the code when the mouse passes over the link. The onMouseOver will execute a piece of code when the mouse moves away from the link. They are used in exactly the same way as onClick.
This is one of the main ways of using link events. If you have not seen rollover images before, they are images (usually used on navigation bars like the one at the top of this page) and when the mouse moves over the link it changes the image which is displayed.
This is done using a combination of the onMouseOver and onMouseOut events. To explain - when the mouse passes over the link you want the image to change to the new image, when it moves away from the link, the old picture should be displayed again.
The first thing you must do is edit the <img> tag you use to insert the image you want to change. Instead of just having something like this:
<img src="home.gif" alt="Home">
you would have the following:
<img src="home.gif" alt="Home" name="home_button">
The name for the image could be anything and, like the window names from the last part, is used to refer to the image later on.
Now you have given a name to the image you are using you will want to create the rollover. The first thing you must do is create the image for the rollover and save it. Then create a link round the image. If you don't want to have a link on the image you can still do a rollover by specifying the href as # which will make the link do nothing eg:
The following code will make a mouseover on your image (assuming you inserted the image as shown above and called your mouseover image homeon.gif):
<a href="index.htm" onMouseOver="home_button.src='homeon.gif';" onMouseOut="home_button.src='home.gif';"><img src="home.gif" alt="Home" name="home_button" border="0"></a>
I will now explain this code:
Firstly you are creating a standard link to index.htm. Then you are telling the browser that when the mouse moves over the link the image with the name home_button will change to homeon.gif. Then you are telling it that when the mouse moves away from the link to change the image called home_button to home.gif. Finally you are inserting an image called home_button with an alt tag of 'Home' and no border round it.
If you have read the last part of the tutorial you will see t
hat onClick, onMouseOver and onMouseOut can be used with text links as well as images in exactly the same way as you did above. This, of course, means that you can create interesting effects by, when the mouse moves over an image, another image changes. This could be very useful for placing a description of a link on a page.
window.status='Your Text In Here';
You can include this in standard code, onClick, onMouseOver or onMouseOut. This allows you to do things like display a description of a link when the mouse moves over it.
In the next part I will show you how to use the If commmand and how to use loops.
1999 - 2001 FreeWebmasterHelp.com