DevelopPHP.com 2011 Forum Discussion(not active)


add onmouseover to drop down menu answer Plse!
Apr 10, 2011 groggie wrote:
Using JS for activiation of an image map 'drop down' menu.
By default, you have to click the image map co-ords to activate the 'drop down'. I want it to be 'onmouseover'. I have played with onmouseover onmouseout, but can't get it to work properly. It looks like you will need a function, which is beyound my coding abaility at the mo.Or, it may be an easier anwer. Basic page code is below -used just a simple img, but it is not attached.

Any help, please? Ta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
<!--
#content {
position: relative}

#content a {
display: block}

#menu1, #menu2, #menu3, #menu4 {
display: none}

#menu1 {
position: absolute;
top: 50px;
left: 210px}

#menu2 {
position: absolute;
top: 50px;
left: 260px}

#menu3 {
position: absolute;
top: 50px;
left: 310px}

#menu4 {
position: absolute;
top: 50px;
left: 360px}
-->
</style>
<script type="text/javascript">
<!--
function showMenu(menuId)  {
//hide all the menus
document.getElementById('menu1').style.display="none";
document.getElementById('menu2').style.display="none";
document.getElementById('menu3').style.display="none";
document.getElementById('menu4').style.display="none";
//display the menu for this area of the image
document.getElementById(menuId).style.display="block";
}
//-->
</script>
</head>
<body>
<div id="content">
   <img src="img/patch.jpg" alt="alt text" usemap="#patchMap" />
   <div id="menu1">
         Menu 1
        <a href="link1.htm">Link1</a>
        <a href="link2.htm">Link2</a>
        <a href="link3.htm">Link3</a>
        <a href="link4.htm">Link4</a>
   </div>
   <div id="menu2">
         Menu 2
        <a href="link1.htm">Link1</a>
        <a href="link2.htm">Link2</a>
        <a href="link3.htm">Link3</a>
        <a href="link4.htm">Link4</a>
   </div>
      <div id="menu3">
         Menu 3
        <a href="link1.htm">Link1</a>
        <a href="link2.htm">Link2</a>
        <a href="link3.htm">Link3</a>
        <a href="link4.htm">Link4</a>
   </div>
      <div id="menu4">
         Menu 4
        <a href="link1.htm">Link1</a>
        <a href="link2.htm">Link2</a>
        <a href="link3.htm">Link3</a>
        <a href="link4.htm">Link4</a>
   </div>  
</div>

<map name="patchMap" id="patchMap" >
   <area shape="rect" coords="0,0,100,100" href="javascript:showMenu('menu1');" />
   <area shape="rect" coords="100,0,200,100" href="javascript:showMenu('menu2');" />
   <area shape="rect" coords="0,100,100,200" href="javascript:showMenu('menu3');" />
   <area shape="rect" coords="100,100,200,200" href="javascript:showMenu('menu4');" />  
</map>
</body>
</html>


Re:add onmouseover to drop down menu answer Plse!
Apr 12, 2011 groggie responded with:
This can be viewed at-   http://civictheat.tsavo.nzoffice.com/imgmapnavtest.php

Thanks.

Re:add onmouseover to drop down menu answer Plse!
Apr 17, 2011 groggie responded with:
OK, sorted.
The code is:
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
<!--
#content {
position: relative}

#content a {
display: block}

#menu1, #menu2, #menu3, #menu4 {
display: none}

#menu1 {
position: absolute;
top: 50px;
left: 210px}

#menu2 {
position: absolute;
top: 50px;
left: 260px}

#menu3 {
position: absolute;
top: 50px;
left: 310px}

#menu4 {
position: absolute;
top: 50px;
left: 360px}
-->
</style>
<script type="text/javascript">
<!--
function showMenu(menuId) {
//hide all the menus
document.getElementById('menu1').style.display="none";
document.getElementById('menu2').style.display="none";
document.getElementById('menu3').style.display="none";
document.getElementById('menu4').style.display="none";
//display the menu for this area of the image
document.getElementById(menuId).style.display="block";
}
//-->
</script>
</head>
<body>
<div id="content">
<img src="http://civictheat.tsavo.nzoffice.com/patch.jpg" alt="alt text" usemap="#patchMap" />
<div id="menu1">
Menu 1
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div>
<div id="menu2">
Menu 2
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div>
<div id="menu3">
Menu 3
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div>
<div id="menu4">
Menu 4
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div> 
</div>

<map name="patchMap" id="patchMap" >
<area shape="rect" coords="0,0,100,100" onmouseover="javascript:showMenu('menu1');" />
<area shape="rect" coords="100,0,200,100" onmouseover="javascript:showMenu('menu2');" />
<area shape="rect" coords="0,100,100,200" onmouseover="javascript:showMenu('menu3');" />
<area shape="rect" coords="100,100,200,200" onmouseover="javascript:showMenu('menu4');" /> 
</map>
</body>
</html>  "
"
©2011 DevelopPHP.com