PDA

View Full Version : Drop Down Menu with rollover image links



mensendamp
04-10-2007, 06:33 PM
1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: I am using rollover image links (so when you mouse over the text link it is a different colour) how would I implement the script into my links, my links are here: (sorry I'm new at this)


<td width="69"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about2.jpg',1)"><img src="images/about.jpg" name="about" width="69" height="50" border="0" id="about" /></a></td>
<td width="91"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('artists','','images/artists2.jpg',1)"><img src="images/artists.jpg" name="artists" width="91" height="50" border="0" id="artists" /></a></td>
<td width="78"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','images/media2.jpg',1)"><img src="images/media.jpg" name="media" width="78" height="50" border="0" id="media" /></a></td>
<td width="74"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','images/gallery2.jpg',1)"><img src="images/gallery.jpg" name="gallery" width="74" height="50" border="0" id="gallery" /></a></td>
<td width="99"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('shop','','images/shop2.jpg',1)"><img src="images/shop.jpg" name="shop" width="99" height="50" border="0" id="shop" /></a></td>
<td width="75"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact2.jpg',1)"><img src="images/contact.jpg" name="contact" width="75" height="50" border="0" id="contact" /></a></td>
<td width="167"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resources','','images/resources2.jpg',1)"><img src="images/resources.jpg" name="resources" width="167" height="50" border="0" id="resources" /></a></td>

Any info GREATLY appreciated :-) I know this sounds easy, but I just want to get a good understanding. Thank you!

ddadmin
04-10-2007, 10:18 PM
Just to take a step back, the basic code you add to your links to associate a drop down menu to it is:


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" >Web Design</a>

So what you want to do here is combine the code in red with your existing HTML above. Here's the original (one of the links):


<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about2.jpg',1)"><img src="images/about.jpg" name="about" width="69" height="50" border="0" id="about" /></a>

And here's what the modified code should look:


<a href="#" onClick="return clickreturnvalue()" onmouseout="MM_swapImgRestore(); delayhidemenu()" onmouseover="MM_swapImage('about','','images/about2.jpg',1); dropdownmenu(this, event, menu1, '150px')"><img src="images/about.jpg" name="about" width="69" height="50" border="0" id="about" /></a>