• links that activate on rollover of image maps,
• other images that appear that provide additional information on rollover,

we will develop these notions further in our quest for viable look ahead web browsing.

We are going to combine these approaches to create sub menus that popup when the user rolls over a particular image map.  Then these submenus will have active links.  At present we will maintain our basic table layout.  Modifying the overall layout of the menus and submenus is something that will be left to homework.

In general, I am trying to develop some ways to get functional popup menus that are fairly easy to implement and work in both Netscape and IE.  The usual solutions are VERY complicated.  Unfortunately, this particular approach only works in Netscape 6 or later and IE 4 or later.  But I still think it is well worth the work.  Our next approach will have more universal application.

The first thing you need to do is copy the following four images into an images directory.  Again, these have been developed as gif files using transparent backgrounds.   BlankLinks really is an image that needs to be copied.

You need to copy the following code into a file called SimpleMenuImageMaps.html.

<map name="NHImageMap">

<area href="#" shape="rect" coords="30, 70, 130, 100"
onMouseOver="window.document.menus.src='images/NewsLinks.gif';">

<area href="#" shape="rect" coords="30, 127, 115, 157"
onMouseOver="window.document.menus.src='images/HumorLinks.gif';">

</map>

<img border="0" src="images/NewsHumor.gif" usemap="#NHImageMap" width="200" height="250">

</td>
<td width="168">

<img border="0" src="images/BlankLinks.gif" name="menus">

</td>
</tr>
</table>
</div>

</body>
</html>

• The image maps make hotspots of the rectangular regions over the words Humor and News.
• The onMouseOver event code segments within each area determine which image should appear when the hotspot is moused over.
• The BlankLinks.gif is used for the initial load of the page and acts as a placeholder where the other images will appear.

Now we want to further develop the popup menus so that they are actively linked to their particular sources.  We need to have image maps that are invoked when the images appear.  This requires some fairly complicated image maps to be written in HTML or developed in some other program like FrontPage or an Adobe product.  If you name the image maps then they can be invoked when the appropriate image appears.

The following code should be copied into a file called RolloverMenuIMaps.html.

<map name="NHImageMap">
<area href="#" shape="rect" coords="30, 70, 130, 100"
onMouseOver="window.document.menus.src='images/HumorLinks.gif'; window.document.menus.useMap='#HumorLinksIMap';">

<area href="#" shape="rect" coords="30, 127, 115, 157"
onMouseOver="window.document.menus.src='images/NewsLinks.gif'; window.document.menus.useMap='#NewsLinksIMap';">
</map>

<img border="0" src="images/NewsHumor.gif" usemap="#NHImageMap" width="200" height="250"></td>

<td width="168"><img border="0" src="images/BlankLinks.gif" name="menus"></td>
</tr>
</table>
</div>

</body>
</html>

window.document.menus.useMap='#HumorLinksIMap';

Notice the # in front of the image map name.  This is necessary!  Unfortunately, this sort of JavaScript is available only in Netscape 6 or IE 4 or later.

Anyway, when these submenu like images are swapped in, the appropriate image map is invoked so that particular words in the images provide links.