Friday 22 June 2012

Part 5 - Link Events, Image Swaps & The Taskbar in JavaScript

Introduction

In this part I will show you how to use link events, do image swaps and display things in the browser status bar.

Link Events in JavaScript

A link event is a different way of including JavaScript on your page. Instead of having <script> tags in your HTML you can set JavaScript that will only be executed when certain things happen.

There are three ways of executing some JavaScript code in a link. They are:

onClick
onMouseOver
onMouseOut

They can have many different uses but the most common is for image swaps (mouseover images).

onClick Event
 in JavaScript 

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:

<a href="#" onClick="JavaScript Code">Click Here</a>

As you can see, one main difference is that the href of the link points to a #. This is nothing to do with the JavaScript, it just neabs that, instead of opening a new page, the link will not do anything. You could, of course, include a link in here and you would be able to open a new page AND execute some code at the same time. This can be useful if you want to change the content of more than one browser window or frame at the same time.

onMouseOver and onMouseOut Event in JavaScript

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.

Rollover Images in JavaScript

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:

<a href="#"></a>

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.

Status Bar

The status bar is the grey bar along the bottom of a web browser where information like, how much the page has loaded and the URL which a link is pointing to appears. You can make your own text apppear in the status bar using the JavaScript you already know using the following code:

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.

Part 6

In the next part I will show you how to use the If commmand and how to use loops.

No comments:

Post a Comment