Below are very simple onMouseover examples. onMouseover is an event handler in the JavaScript realm. As you may know, JavaScript is a client-side scripting language. What that means is that it allows you to handle events (such as onMouseover, onMouseout, onClick, etc.) in your web browser, thereby allowing interactivity with your website vistior.

Let's start with poping a windows dialog with an alert message. For example, if the visitor simply rolls his mouse over a text link, an alert window will pop up. Here is the code:

<a href="javascript:void();" onMouseover="alert('get off me!');">Put your mouse over me</a>

The code above will produce this output:

Put your mouse over me

The code is pretty self-explanatory. All you got to do is include a onMouseover property inside your anchor tag.

Here is another popular trick to hide the "real" url that the anchor is linking to:

<a href="a long url as an example" onMouseover="window.status='my url';">click me!</a>

The code above will produce this ouput:

click me!

Notice wehn you put your mouse over the link above, the browser's left bottom corner reads "a long url as an example"

The window.status commands the browser to display the url to whatever it is set to. I'm sure you have noticed that when you put your mouse over an active anchor link, the url is displayed at the bottom left of the web browser.

That's it for today! We will have more advanced javascript mouseover example for you later on!

[Reply] [Back to Top]