I could be wrong, but I doubt anyone is going to serve up exactly what you
want. You'll have to apply the known methods recursively as you move down
through images. I still suggest the non-script solution. Old-style image
maps have accessibility problems. Read the article at alistapart, and I
think you'll be able to come up with a solution. Also have a look at the
work done at:
http://www.meyerweb.com/eric/css/edge/index.html
...which again may not be ecactly what you want. Make modifications to
your needs.
Maybe you can use this approach, it uses multiple images, each using a
unique image map (I only included 2 maps here as an example).
By changing the visibility property of the grahpics, you automatically
select which image map is in use. This approach has several graphics
that are the same size, that have the same 'main menu' choices on their
left sides, and individual 'sub-menu' choices on their right sides.
Moving the mouse over the main menu areas changes which graphic/imagemap
combination is in use, and displays the appropriate submenu choices on
the right side.
<style type="text/css">
img {
border: 0;
visibility: hidden;
position: absolute;
top: 10px;
left: 10px
width: 540px;
height: 540px;
}
</style>
<SCRIPT type="text/javascript">
var lasttype=10101;
function LoadMenu (type) {
if (type==lasttype)
return true;
for (var n=0; n<6; n++)
if (n==type)
document.images[n].style.visibility="visible";
else
document.images[n].style.visibility="hidden";
lasttype=type;
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG src="mainmenu.jpg" usemap="#mainmenumap"
style="visibility:visible;">
<IMG src="frozenfood.jpg" usemap="#submenumap1">
<IMG src="freshfood.jpg" usemap="#submenumap2">
<IMG src="beverages.jpg" usemap="#submenumap3">
<IMG src="homehealth.jpg" usemap="#submenumap4">
<IMG src="petfood.jpg" usemap="#submenumap5">
<map name="submenumap1" id="submenumap1">
<area shape="rect" coords="7, 57, 167, 143" onmouseover= "LoadMenu(1)">
<area shape="rect" coords="7, 153, 167, 239" onmouseover= "LoadMenu(2)">
<area shape="rect" coords="7, 249, 167, 334" onmouseover= "LoadMenu(3)">
<area shape="rect" coords="7, 347, 167, 430" onmouseover= "LoadMenu(4)">
<area shape="rect" coords="7, 449, 167, 527" onmouseover= "LoadMenu(5)">
<area shape="rect" coords="191,87,533,120" HREF = "large.htm">
<area shape="rect" coords="191,121,533,152" HREF = "small.htm">
</map>
<map name="submenumap3" id="submenumap3">
<area shape="rect" coords="7, 57, 167, 143" onmouseover= "LoadMenu(1)">
<area shape="rect" coords="7, 153, 167, 239" onmouseover= "LoadMenu(2)">
<area shape="rect" coords="7, 249, 167, 334" onmouseover= "LoadMenu(3)">
<area shape="rect" coords="7, 347, 167, 430" onmouseover= "LoadMenu(4)">
<area shape="rect" coords="7, 449, 167, 527" onmouseover= "LoadMenu(5)">
<AREA SHAPE="RECT" COORDS="192,83,534,55" HREF="tea.htm" TITLE="Tea">
<AREA SHAPE="RECT" COORDS="192,115,532,87" HREF="eg25.htm" TITLE="earl
grey 25 bags">
<AREA SHAPE="RECT" COORDS="192,147,534,119" HREF="eg100.htm"
TITLE="earl grey 100 bags">
<AREA SHAPE="RECT" COORDS="194,181,532,149" HREF="eg200.htm"
TITLE="earl grey 200">
</map>