JavaScript Functions and Some Tricks

onMouseOver

Can you make your links more responsive or more intelligent? Can they do more than taking you to another web page? Yes, with the help of JavaScript you can achieve that. But you need to know a few things before going any further. First of all, the event that occurs when you move your mouse over a link (to click on the link, perhaps) is called "onMouseOver". Now that's a good name, right?

Displaying Something in the Status Bar

Next important thing is the "window" object. As you may be knowing, everything in a web page is an object that posseses some properties and certain methods. As an example, the status bar is a property of the window object which can be used in the following way: window.status='Message'.

Combining the two tricks

Now we can combine the two tricks to display a customized message whenever somebody moves a mouse over a link. Suppose you have a link "www.somewhere.com/mypage" and you want to display "The best place on cyberspace" when the user moves his mouse over the link. You can achieve this with the help of following code:

<A HREF="http://www.somewhere.com/mypage"
onMouseOver= "window.status= 'The best place on cyberspace' ">
My Homepage
</a>

This will create a link pointing to "http://www.somewhere.com/mypage". The text displayed will be "My Homepage" and when the user moves his mouse over the link, the status bar will show "The best place on cyberspace". Experiment with these tricks to get a better feel of them.

Some Extensions

If you try this example, you may notice a strange thing: the text displayed in the status bar does not go off! In almost 100% cases, you will like to display some text until the mouse hovers over the link; but you will also like to make the text disappear when the mouse moves leaves the link. So, how can you do that? There is an event that occurs when the mouse moves out of a link. Can you guess the name? Right, its "onMouseOut". Modify the above example by adding a new line:

<A HREF="http://www.somewhere.com/mypage"
onMouseOver= "window.status= 'The best place on cyberspace' "
onMouseOut= "window.status= ' ' ">
My Homepage
</a>

Introduction to JavaScript Functions

Until now we have been writing single line JavaScript codes. For more complex tasks JavaScript functions become essential. Suppose, you want to do two things when a user moves his mouse over a link: (i) display some text in the status bar using window.status; and (ii) display a message box using alert(). Writing a JavaScript function is a better way to handle such problems.

2. Jul 5, 2001 8:44 AM
Hi. I'm having a problem getting your last example to work. I'm pasting what I did so you can take a look at it and maybe figure out what I did wrong. Thanks for your help!
Leah

-- posted by Leah30

For a complete listing of article comments, questions, and other discussions related to Muhammad Ali Shah's JavaScript topic, please visit the Discussions page.