Image Map Navigation and Pulldown Menus

J

Jerry

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.

Is this possible? If so, can someone give me a URL so I can see how
others did this?

Thanks,
 
A

ASM

Jerry said:
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 ...
 
J

Jerry

ASM said:
menu and submenus with maped images
is it realy a good idea ?

I'm not quite sure yet. I suggested that they do this in flash but they
would rather do it without. Weird considering there are other flash
elements on the page.
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'll try it out. Thanks for the assistance!
 
J

Jerry

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>
 
A

ASM

Jerry said:
ASM wrote: [...]
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' : '';
}
[...]

I applied it to this but I couldn't get it to work.

I didn't try the given example ...
Did I do something
wrong here?

think so
<html>
<head>
<script>
function roll(sub_menu) {
var s = sub_menu;

var s = document.getElementById(sub_menu).style;
// to get actual sub menus's style
document.getElementById(sub_menu).style = s.display==''? 'inline' : '';

// to jump in other style

// if s.display (actual style display) is 'default'
// hop! doc.gEBI(sub_menu) style is 'inline'
// else
// if s.display is not default
// hop! sub_menu set to default displaying
}
</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">

no map for sub menu ?
 
J

Jerry

ASM said:
Jerry said:
ASM wrote:
[...]
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' : '';
}
[...]

I applied it to this but I couldn't get it to work.


I didn't try the given example ...
Did I do something wrong here?


think so
<html>
<head>
<script>
function roll(sub_menu) {
var s = sub_menu;


var s = document.getElementById(sub_menu).style;
// to get actual sub menus's style
document.getElementById(sub_menu).style = s.display==''? 'inline' : '';


// to jump in other style

// if s.display (actual style display) is 'default'
// hop! doc.gEBI(sub_menu) style is 'inline'
// else
// if s.display is not default
// hop! sub_menu set to default displaying
}
</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">


no map for sub menu ?

There will be a map for it but I haven't developed it yet.
 

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

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top