Help with Dropdown Menu over Hotspot

**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?

Code:

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

Thread: Help with Dropdown Menu over Hotspot

Thread Tools

Search Thread

Help with Dropdown Menu over Hotspot

Bookmarks

Bookmarks

Posting Permissions