Javascript function to specify an image map?

J

Jim Van Abbema

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?

Thanks,
Jim Van Abbema
 
N

NOXwebmasterx

Jim said:
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"
 
J

Jim Van Abbema

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.
 
N

NOXwebmasterx

Jim said:
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.
 
M

mscir

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top