Q: I've seen a lot of sites where I get words at the bottom of my browser instead of a URL. How can I do this?
- Loss for Words
A: The Link object in JavaScript provides an event handler called onMouseOver for situations when the mouse passes over a link. If you've never tinkered with JavaScript before, don't worry. It looks like crazed HTML, but it's easier than it seems. For example, this link will display text in the status region at the bottom of your browser window (provided the user has JavaScript turned on).
Let's consider the code for the link directly above:
<a href="javascript:void(0)" onMouseOver="(window.status='Clinton Wins in Landslide - Dole Dejected'); return true">
The onMouseOver= allows specified changes to take place when the user's mouse passes over the link (thus, the name). In this instance, text ('Clinton Wins in Landslide - Dole Dejected') will be pushed into the Window object status area (because the window.status property is invoked).
Also notice the return true; if you omit this, the browser will happily ignore your attempts to change the window.status (so be sure to include it). Also noteworthy is that our target URL is javascript:void(0), because we don't want the browser to load a new page. It's one way of telling it, "Stay!" (This may sound dandy, but in reality it's more annoying than anything else.)
Where onMouseOver starts to get useful, though, is when it's used in
conjunction with <area> tags in a client-side image map. Individual <area> tags within a
<map> can each contain an event-handler
onMouseOver=, which will display a message in the status region.
Let's use the sample image from this week's HTML column on creating client-side image maps, and add some JavaScript onMouseOver= stuff to it. If your browser supports JavaScript and client-side image maps, you should see the name of a color appear in the status window as your mouse passes over each box in this image.
Here's how I did it:
<a href="my_map.map"><img src="my_image.gif" border=0
usemap="#foo" ismap></a>
<map name="foo">
<area href="yellow.html" coords="20,20,70,60"
onMouseOver="window.status='yellow'; return true">
<area href="red.html" coords="90,20,140,60"
onMouseOver="window.status='red'; return true">
<area href="blue.html" coords="20,80,70,120"
onMouseOver="window.status='blue'; return true">
<area href="green.html" coords="90,80,140,120"
onMouseOver="window.status='green'; return true">
</map>
And that's it. It's really that easy.
