PDA

View Full Version : AnyLink Vertical Menu



ccz
11-05-2006, 01:56 PM
1) Script Title: Any Link Vertical Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex1/anylinkvertical.htm

3) Describe problem:

Hey all, I've recently been trying to implement the AnyLink Vertical Menu into this website:

http://previews.seventy9.co.uk/astratec/index_nav.php

The problem I'm having with it is that it works perfectly in IE, but when its viewed in FF the links that are displayed shift down near the bottom of the image that is rolled over.

If anyone could help me it'd be very much appriciated!!

Cheers
ccz

jscheuer1
11-05-2006, 05:53 PM
Your menu's triggers are images but you have the onmouseover event tied to the links. IE and FF treat links around images differently. IE gives them the dimensions of the images, FF does not unless they are display:block;. You have two choices (perhaps more):

1 ) Make the links used to trigger the drop downs display:block;

or

2 ) Make the triggers be the images:


<tr>
<td valign="top">

<a href="mpbt.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mpbt','','img/mpbt_btn_over.jpg',1)"><img onmouseover="dropdownmenu(this, event, menu1, '145px');" onmouseout="delayhidemenu();" src="img/mpbt_btn.jpg" alt="Mobile Phone Battery Testers" name="mpbt" width="140" height="37" border="0"></a></td>
</tr>
<tr>
<td valign="top"><a href="mpbc.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mpbc','','img/mpbc_btn_over.jpg',1)"><img onmouseover="dropdownmenu(this, event, menu2, '145px');" onmouseout="delayhidemenu();" src="img/mpbc_btn.jpg" alt="Mobile Phone Battery Chargers" name="mpbc" width="140" height="37" border="0"></a></td>
</tr>
<tr>
<td valign="top"><a href="ibt.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ilbtc','','img/ilbtc_btn_over.jpg',1)"><img onmouseover="dropdownmenu(this, event, menu3, '145px');" onmouseout="delayhidemenu();" src="img/ilbtc_btn.jpg" alt="Industrial / Leisure Battery Testers" name="ilbtc" width="140" height="50" border="0"></a></td>
</tr>
<tr>
<td valign="top"><a href="mbt.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mbt','','img/mbt_btn_over.jpg',1)"><img onmouseover="dropdownmenu(this, event, menu4, '145px');" onmouseout="delayhidemenu();" src="img/mbt_btn.jpg" alt="Medical Battery Testers" name="mbt" width="140" height="37" border="0"></a></td>
</tr>
<tr>
<td valign="top"><a href="trbt.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('trbt','','img/trbt_btn_over.jpg',1)"><img onmouseover="dropdownmenu(this, event, menu5, '145px');" onmouseout="delayhidemenu();" src="img/trbt_btn.jpg" alt="Tetra Radio Battery Testers" name="trbt" width="140" height="39" border="0"></a></td>
</tr>
<tr>
<td valign="top"><a href="trbc.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('trbc','','img/trbc_btn_over.jpg',1)"><img onmouseover="dropdownmenu(this, event, menu6, '145px');" onmouseout="delayhidemenu();" src="img/trbc_btn.jpg" alt="Tetra Radio Battery Chargers" name="trbc" width="140" height="37" border="0"></a></td>
</tr>
<tr>
<td valign="top"><a href="ba.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ba','','img/ba_btn_over.jpg',1)"><img src="img/ba_btn.jpg" alt="Battery Adapters" name="ba" width="140" height="62" border="0"></a></td>
</tr>
<tr>
<td valign="top"><a href="product_upgrades.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pu','','img/upgrades_btn_over.jpg',1)"><img onmouseover="dropdownmenu(this, event, menu7, '145px');" onmouseout="delayhidemenu();" src="img/upgrades_btn.jpg" alt="Product Upgrades" name="pu" width="140" height="37" border="0"></a></td>
</tr>

Because there are no convenient exclusive styling hooks for these trigger links, the second method is probably the better of the two.

ccz
11-05-2006, 06:50 PM
That worked like a charm, Over the moon right now and can't thank you enough!