View Full Version : Drop Down Menu

06-05-2007, 06:11 PM
I found a tutorial for drop down menu Here (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm), but I don't know how to put it on my page..

I made an image for the menu bar, its a vertical bar across the top of my page. I want to make hotspots on the image and make dropdown menus for 5 different topics, that would link to pages relating to those topics

I.e. Products > Product 1, Product 2, Product 3
Services > Service 1, Service 2
..and so on

These dropdown menus would be mouseover and the background would be a straight color with a black border...

I've been playing around with the code on the link at the top, but I can't seem to figure out how to do a mouseover on an image hotspot, someone please help!

Thanks so much,

06-06-2007, 06:01 PM

Please... I'm doing a business website and I want it to look professional, the dropdown menu on mouseover will add that extra kick, and enable me to put up the content I need...

I found tutorials for dropdown menus, but theres almost no way to customize it, that I know how to do anyways. I'm using one image as a menu bar across the top of my page and I have hotspots over the text.. Is there any way I can do this at all?

Someone help please!

06-07-2007, 04:10 AM
You would need to make changes to the javascript for the script to work with an image map. Otherwise, the dropdown menu won't display correctly under the appropriate images.
There's some info here http://www.dynamicdrive.com/forums/archive/index.php/t-7516.html

The other thing is, your mage map is pretty simple. You might want to use just single images

<a href="home.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img src="home.gif" style="width:150px; height:50px;border:0;"></a>

<a href="products.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><img src="products.gif" style="width:150px; height:50px;border:0;"></a>

06-07-2007, 04:35 PM
Ok, I'll give that a try, thankyou :)