470,647 Members | 1,148 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,647 developers. It's quick & easy.

Image Map Navigation and Pulldown Menus

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,
--
Jerry
Aug 18 '05 #1
5 2593
ASM
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 ...
--
Stephane Moriaux et son [moins] vieux Mac
Aug 19 '05 #2
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 ?


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.
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'll try it out. Thanks for the assistance!
--
Jerry
Aug 19 '05 #3
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
Aug 19 '05 #4
ASM
Jerry wrote:
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 ?
</div>

</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac
Aug 19 '05 #5
ASM wrote:
Jerry wrote:
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.

--
Jerry
Aug 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Gufus | last post: by
reply views Thread by Veli-Pekka Tštilš | last post: by
2 posts views Thread by Jay | last post: by
2 posts views Thread by Thrasher Remailer | last post: by
4 posts views Thread by Jonathan Wood | last post: by
reply views Thread by warner | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.