ASM wrote:
Jerry wrote:
Hello!
I have an image that uses an image map for navigation. We would like a
pull-down menu to appear when the user mouses over the link. The
pull-down menu is another image that was created to retain the look of
the site and would use another image map for it's links.
menu and submenus with maped images
is it realy a good idea ?
Is this possible? If so, can someone give me a URL so I can see how
others did this?
I think you would have each couple of sub menu image and its map
in an individual div
All sub-menu-divs are styled { display:none; }
then :
fly over a main menu image area would style the correct div to inline
function rool(sub_menu) {
var s = document.getElementById(subMenu).style;
document.getElementById(sub_menu).style = s.display==''? 'inline' : '';
}
<img ... blah ... usemap="mainMap">
<map name="mainMap">
<area coord=" ... blah
onmouseover="roll('subMenu_1');"
onmouseout="roll('subMenu_1');">
<area ...
onmouseover="roll('subMenu_2');"
onmouseout="roll('subMenu_2');">
...
</map>
<div id="subMenu_1" style="display:none;">
<img blah usemap="map1">
<map name="map1">
<area coord=" ... blah ... onclick="page_1.htm">
...
</map></div>
<div id="subMenu_2" style="display:none;">
etc ... etc ...
I applied it to this but I couldn't get it to work. Did I do something
wrong here?
<html>
<head>
<script>
function roll(sub_menu) {
var s = sub_menu;
document.getElementById(sub_menu).style = s.display==''? 'inline' : '';
}
</script>
<noscript><h1>JAVASCRIPT TURNED OFF</h1></noscript>
</head>
<body>
<img src="images/homepage-nav-buttons.png"
id="navigation" style="border: none;"
usemap="#games" ismap="ismap">
<map name="games" id="games">
<area href="index.htm" shape="poly"
coords="3, 7, 92, 12, 92, 68, 3, 68, 3, 7"
onmouseover="roll('subMenu_1');"
onmouseout="roll('subMenu_1');">
</map>
<div id="subMenu_1" style="display: none;">
<img src="images/test/homepage-gamesmenu.png">
</div>
</body>
</html>
--
Jerry
