wrote:
> Jim Van Abbema wrote:
>
>><> wrote
>>
>>>Jim Van Abbema wrote:
>>>
>>>>Just beneath my row of navigation buttons, I am using rollovers to bring
>>>>up different graphic images, each which have been mapped with several
>>>>links.
>>>>Of course, each graphic requires its own image map. What script can I
>>>>use
>>>>to bring up the correct image map when its respective graphic is
>>>>displayed?
>>>
>>>
>>>Don't use a script.
>>>See thread 11/30/04 "How to create rollovers in imagemaps"
>>
>>This really doesn't answer my question. The rollover functions
>>independently of the image maps. When the graphic is displayed, I need to
>>ensure that the respective specific image map is in use.
>
> 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>
Similar Threads
