Bruno
06-04-2003, 03:55 AM
Hi
I am trying to create a site image navigation...
I made a vertical image with the sites main links - as you mouseOver the mapped areas the image will change highlighting the choice currently available to select. ALSO by mouse overing a main site link you will make a set of sub links located directly underneath visible - and then hidden when you move to a different main site link which will in turn make that set of sub links appear.
(hope I'm not being too confusing - I will show you the code in a sec)
The menu WORKS - may not be the best way of doing it but it works.
OK - there are 2 things I want to do but am stuck on both - firstly I would like to clean up the code maybe create a function to get rid of the bulk involved with mouseovering and making sub links visible/hidden.
The second items on the agenda is to make the sub links go back to the original tranparent image after the mouse moves out after 4 seconds - I have added a setTimeout() function which works but doesn't.....It seems as though when you move your mouse along the menu you immediately start the setTimeout() function - and numerous times - so it seems as though the menu is not staying visible for long enough - what I think needs to happen is I need to include in my function reset() a clear timeout() funtion that IF you mouse over and off another main site link will clear the first timeout() and start a new one.
I know this is confusing but its literally the only way I can explain it. This is the code;
<head>
<script language="JavaScript1.2">
<!--
function reset() {
document.getElementById('sub_nav1').style.visibility='hidden';
document.getElementById('sub_nav2').style.visibility='hidden';
document.getElementById('sub_nav3').style.visibility='hidden';
document.getElementById('sub_nav4').style.visibility='hidden';
document.getElementById('sub_nav').style.visibility='visible';
//the line above returns the sub navigation image - which is
//tranparent
//-->
}
</script>
</head>
<body>
<!-- Begining Of Site Navigation -->
<!-- Original Viewable Site Navigation -->
<div style="position:absolute; left:0px; top:46px; width: 700px; height: 20px; z-index:4;"><img src="images/menu.jpg" width="700" height="20" border="0" usemap="#Map" id="nav">
<map name="Map">
<area shape="rect" coords="124,0,225,42" href="asia_pac.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu1.jpg';document.getElementById('sub_nav').style.visibility='hidden';document.getElementById('sub _nav1').style.visibility='visible';document.getElementById('sub_nav2').style.visibility='hidden';doc ument.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';setTimeout('reset()', 5000);">
<area shape="rect" coords="225,0,299,42" href="europe.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu2.jpg';document.getElementById('sub_nav').style.visibility='hidden';document.getElementById('sub _nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='visible';doc ument.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';setTimeout('reset()', 5000);">
<area shape="rect" coords="299,0,418,42" href="n_america.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu3.jpg';document.getElementById('sub_nav').style.visibility='hidden';document.getElementById('sub _nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='hidden';docu ment.getElementById('sub_nav3').style.visibility='visible';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';setTimeout('reset()', 5000);">
<area shape="rect" coords="418,0,540,42" href="s_america.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu4.jpg';document.getElementById('sub_nav').style.visibility='hidden';document.getElementById('sub _nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='hidden';docu ment.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style. visibility='visible';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';setTimeout('reset()', 5000);">
<area shape="rect" coords="541,0,608,42" href="global.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu5.jpg';document.getElementById('sub_nav').style.visibility='visible';document.getElementById('su b_nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='hidden';doc ument.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';">
<area shape="rect" coords="607,0,690,42" href="secure/index.htm" target="main" alt="Explicity - IS Personnel Only" onMouseOver="document.getElementById('nav').src='images/menu6.jpg';document.getElementById('sub_nav').style.visibility='visible';document.getElementById('su b_nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='hidden';doc ument.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';">
</map>
</div>
<!-- End of Original Viewable Site Navigation -->
<!-- Begining Of Invisible Rollover Navigation -->
<div id="sub_nav" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:visible;"><img src="images/menu_1.jpg" width="700" height="20" border="0"></div>
<div id="sub_nav1" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:hidden;"><img src="images/menu1_1.gif" width="700" height="20" border="0" usemap="#sub_nav1_Map">
<map name="sub_nav1_Map">
<area shape="rect" coords="124,0,241,19" href="asia_pac/documentation.htm" target="main">
<area shape="rect" coords="241,0,329,19" href="asia_pac/personnel.htm" target="main">
</map></div>
<div id="sub_nav2" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:hidden;"><img src="images/menu2_1.gif" width="700" height="20" border="0" usemap="#sub_nav2_Map">
<map name="sub_nav2_Map">
<area shape="rect" coords="226,0,343,19" href="europe/documentation.htm" target="main">
<area shape="rect" coords="343,0,432,19" href="europe/personnel.htm" target="main">
</map></div>
<div id="sub_nav3" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:hidden;"><img src="images/menu3_1.gif" width="700" height="20" border="0" usemap="#sub_nav3_Map">
<map name="sub_nav3_Map">
<area shape="rect" coords="298,-1,416,19" href="n_america/documentation.htm" target="main">
<area shape="rect" coords="415,0,504,19" href="n_america/personnel.htm" target="main">
</map></div>
<div id="sub_nav4" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:hidden;"><img src="images/menu4_1.gif" width="700" height="20" border="0" usemap="#sub_nav4_Map">
<map name="sub_nav4_Map">
<area shape="rect" coords="416,0,534,19" href="s_america/documentation.htm" target="main">
<area shape="rect" coords="533,0,622,19" href="s_america/personnel.htm" target="main">
</map></div>
<!-- End Of Invisible Rollover Navigation -->
<!-- End Of Site Navigation -->
Iam obviously not great at JavaScript but am trying and would seriously appreciate this help
Thanks
Bruno
I am trying to create a site image navigation...
I made a vertical image with the sites main links - as you mouseOver the mapped areas the image will change highlighting the choice currently available to select. ALSO by mouse overing a main site link you will make a set of sub links located directly underneath visible - and then hidden when you move to a different main site link which will in turn make that set of sub links appear.
(hope I'm not being too confusing - I will show you the code in a sec)
The menu WORKS - may not be the best way of doing it but it works.
OK - there are 2 things I want to do but am stuck on both - firstly I would like to clean up the code maybe create a function to get rid of the bulk involved with mouseovering and making sub links visible/hidden.
The second items on the agenda is to make the sub links go back to the original tranparent image after the mouse moves out after 4 seconds - I have added a setTimeout() function which works but doesn't.....It seems as though when you move your mouse along the menu you immediately start the setTimeout() function - and numerous times - so it seems as though the menu is not staying visible for long enough - what I think needs to happen is I need to include in my function reset() a clear timeout() funtion that IF you mouse over and off another main site link will clear the first timeout() and start a new one.
I know this is confusing but its literally the only way I can explain it. This is the code;
<head>
<script language="JavaScript1.2">
<!--
function reset() {
document.getElementById('sub_nav1').style.visibility='hidden';
document.getElementById('sub_nav2').style.visibility='hidden';
document.getElementById('sub_nav3').style.visibility='hidden';
document.getElementById('sub_nav4').style.visibility='hidden';
document.getElementById('sub_nav').style.visibility='visible';
//the line above returns the sub navigation image - which is
//tranparent
//-->
}
</script>
</head>
<body>
<!-- Begining Of Site Navigation -->
<!-- Original Viewable Site Navigation -->
<div style="position:absolute; left:0px; top:46px; width: 700px; height: 20px; z-index:4;"><img src="images/menu.jpg" width="700" height="20" border="0" usemap="#Map" id="nav">
<map name="Map">
<area shape="rect" coords="124,0,225,42" href="asia_pac.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu1.jpg';document.getElementById('sub_nav').style.visibility='hidden';document.getElementById('sub _nav1').style.visibility='visible';document.getElementById('sub_nav2').style.visibility='hidden';doc ument.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';setTimeout('reset()', 5000);">
<area shape="rect" coords="225,0,299,42" href="europe.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu2.jpg';document.getElementById('sub_nav').style.visibility='hidden';document.getElementById('sub _nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='visible';doc ument.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';setTimeout('reset()', 5000);">
<area shape="rect" coords="299,0,418,42" href="n_america.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu3.jpg';document.getElementById('sub_nav').style.visibility='hidden';document.getElementById('sub _nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='hidden';docu ment.getElementById('sub_nav3').style.visibility='visible';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';setTimeout('reset()', 5000);">
<area shape="rect" coords="418,0,540,42" href="s_america.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu4.jpg';document.getElementById('sub_nav').style.visibility='hidden';document.getElementById('sub _nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='hidden';docu ment.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style. visibility='visible';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';setTimeout('reset()', 5000);">
<area shape="rect" coords="541,0,608,42" href="global.htm" target="main" onMouseOver="document.getElementById('nav').src='images/menu5.jpg';document.getElementById('sub_nav').style.visibility='visible';document.getElementById('su b_nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='hidden';doc ument.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';">
<area shape="rect" coords="607,0,690,42" href="secure/index.htm" target="main" alt="Explicity - IS Personnel Only" onMouseOver="document.getElementById('nav').src='images/menu6.jpg';document.getElementById('sub_nav').style.visibility='visible';document.getElementById('su b_nav1').style.visibility='hidden';document.getElementById('sub_nav2').style.visibility='hidden';doc ument.getElementById('sub_nav3').style.visibility='hidden';document.getElementById('sub_nav4').style .visibility='hidden';" onMouseOut="document.getElementById('nav').src='images/menu.jpg';">
</map>
</div>
<!-- End of Original Viewable Site Navigation -->
<!-- Begining Of Invisible Rollover Navigation -->
<div id="sub_nav" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:visible;"><img src="images/menu_1.jpg" width="700" height="20" border="0"></div>
<div id="sub_nav1" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:hidden;"><img src="images/menu1_1.gif" width="700" height="20" border="0" usemap="#sub_nav1_Map">
<map name="sub_nav1_Map">
<area shape="rect" coords="124,0,241,19" href="asia_pac/documentation.htm" target="main">
<area shape="rect" coords="241,0,329,19" href="asia_pac/personnel.htm" target="main">
</map></div>
<div id="sub_nav2" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:hidden;"><img src="images/menu2_1.gif" width="700" height="20" border="0" usemap="#sub_nav2_Map">
<map name="sub_nav2_Map">
<area shape="rect" coords="226,0,343,19" href="europe/documentation.htm" target="main">
<area shape="rect" coords="343,0,432,19" href="europe/personnel.htm" target="main">
</map></div>
<div id="sub_nav3" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:hidden;"><img src="images/menu3_1.gif" width="700" height="20" border="0" usemap="#sub_nav3_Map">
<map name="sub_nav3_Map">
<area shape="rect" coords="298,-1,416,19" href="n_america/documentation.htm" target="main">
<area shape="rect" coords="415,0,504,19" href="n_america/personnel.htm" target="main">
</map></div>
<div id="sub_nav4" style="position:absolute; left:0px; top:66px; height:20px; width:700px; visibility:hidden;"><img src="images/menu4_1.gif" width="700" height="20" border="0" usemap="#sub_nav4_Map">
<map name="sub_nav4_Map">
<area shape="rect" coords="416,0,534,19" href="s_america/documentation.htm" target="main">
<area shape="rect" coords="533,0,622,19" href="s_america/personnel.htm" target="main">
</map></div>
<!-- End Of Invisible Rollover Navigation -->
<!-- End Of Site Navigation -->
Iam obviously not great at JavaScript but am trying and would seriously appreciate this help
Thanks
Bruno