<center><h1>Mouseover in Image Maps</h1></center>

<center>
<img src="my_image.gif" width=160 height=140 border=0 alt="An image map" usemap="#mymap">
</center>
<map name="mymap">
<area shape="RECT" coords="20,20,70,60" href="yellow.htm" name="yellow" title="yellow" alt="yellow" onmouseover="window.status='yellow'; return true" onmouseout="window.status=''; return true">
<area shape="RECT" coords="90,20,140,60" href="red.htm" name="red" alt="red" title="red" onmouseover="window.status='red'; return true" onmouseout="window.status=''; return true">
<area shape="RECT" coords="20,80,70,120" href="blue.htm" name="blue" alt="blue" title="blue" onmouseover="window.status='blue'; return true" onmouseout="window.status=''; return true">
<area shape="RECT" coords="90,80,140,120" href="green.htm" name="green" title="green" alt="green" onmouseover="window.status='green'; return true" onmouseout="window.status=''; return true">
</map>
<p>On a side note, users of Internet Explorer 3 and better and Netscape 4.x will be accustomed to seeing a 'tooltip' 
pop up when the mouse is over an image, with a description of the image. This is, of course, defined by the 
<kbd>ALT</kbd> attribute of the <kbd>&lt;IMG&gt;</kbd> tag. 
It is particularly useful with graphical links, as you can use the <kbd>ALT</kbd> text to describe the destination fully. 
It is, of course, also important that you remember its prime purpose, which is to aid those with text browsers, or those 
who have the graphics switched off. In image maps, however, although the <kbd>&lt;AREA&gt;</kbd> tag takes the <kbd>ALT</kbd> 
attribute (in fact it is required), Internet Explorer and Netscape do not show it.</p>

<p>There is a work around, though, which works in at least the version 4 browsers; I'm not sure about IE 3.x, but Netscape 3.x 
does not support it -- perhaps someone with IE 3.x could let me know. This is to use the <kbd>TITLE</kbd> attribute in exactly 
the same way as you use <kbd>ALT</kbd>. In fact, in Internet Explorer 4.x (but not Netscape) this attribute works with all sorts 
of tags; for example, place your mouse over 
<a href="imgmap.htm" onmouseover="window.status='This link will just reload the page'; return true" onmouseout="window.status=''; return true" title="This link points to this page,&#13;so all it will do is reload it.">this link</a>.</p>
<p title="It works in other tags as well!">Now place your mouse over this paragraph... See what I mean? By the way, 
you can force line breaks, as in the 'tooltip' for the link in the paragraph above, using a Carriage Return or Line 
Feed entity (<kbd>&amp;#13;</kbd> or <kbd>&amp;#10;</kbd>). It's that simple.</p>
