Help with Dropdown Menu over Hotspot [Archive]

skreamz

06-06-2007, 06:07 PM

I'm very new to Javascript, and I hear you need it to do what I want to do.

I'm creating a page in dreamweaver. On every page, I have a menu bar along the top, that consists of one image. I have hotspots over the text, which links to other pages on the website. Straight forward.

What I want is to have a dropdown menu that appears when someone hovers over one of the hotspots on the image. Is this possible? If not, how can I do this?

Thankyou!

Trinithis

06-08-2007, 12:02 AM

Something like this?

<html>
<head>
<title>Drop Menu</title>
<style>
#menuContainer {
position:absolute;
z-index:999999;
top:50px;
left:150px;
}
.menu {
width:100px;
line-height:1em;
position:absolute;
background-color:ffff00;
}
.subMenu {
display:none;
background-color:ffaaaa;
}
#menu1 {
left:0px;
}
#menu2 {
left:100px;
}
#menu3 {
left:200px;
}
</style>
</head>

<body>

<div id="menuContainer">
<div id="menu1" class="menu" onmousemove="openMenu(this)">
<a href="#">Menu 1</a>
<a href="#1" class="subMenu">Submenu 1</a>
<a href="#2" class="subMenu">Submenu 2</a>
</div>
<div id="menu2" class="menu" onmousemove="openMenu(this)">
<a href="#">Menu 2</a>
<a href="#1" class="subMenu">Submenu 1</a>
<a href="#2" class="subMenu">Submenu 2</a>
<a href="#3" class="subMenu">Submenu 3</a>
</div>
<div id="menu3" class="menu" onmousemove="openMenu(this)">
<a href="#">Menu 3</a>
<a href="#1" class="subMenu">Submenu 1</a>
</div>
</div>

<script type="text/javascript">
var openedMenu = false;
function openMenu(o) {
if(!openedMenu) openedMenu = o.id;
o = o.getElementsByTagName("*");
for(var i=0; i<o.length; ++i) {
if(o[i].className==="subMenu") o[i].style.display = "inline";
}
}
function closeMenu(e) {
if(!openedMenu) return;
o = e.target?e.target:e.srcElement;
while(o.parentNode) {
if(o.id===openedMenu) return;
o = o.parentNode;
}
o = o.getElementsByTagName("*");
for(var i=0; i<o.length; ++i) {
if(o[i].className==="subMenu") o[i].style.display = "none";
}
openedMenu = false;
}
(document.addEventListener)?document.addEventListener("mousemove", closeMenu, false):document.attachEvent("onmousemove", closeMenu);
</script>

</body>
</html>

aeolus

08-18-2007, 02:45 AM

Hi,Trinithis

The section >>

<div id="menu1" class="menu" onmousemove="openMenu(this)">
<a href="#">Menu 1</a>
<a href="#1" class="subMenu">Submenu 1</a>
<a href="#2" class="subMenu">Submenu 2</a>
</div>

Is it possible changed to the different language automatically when vistors use the different language browser ?

Thanks.