ASM said:
menu and submenus with maped images
is it realy a good idea ?
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>