Rollover for menu buttons...

[alexrpaul]

I have followed the instructions in the AUG to add a rollover in fact I have done it twice and so has a colleague to make sure we aren't missing anything but no joy.

I have checked that the images are where they should be and I have tried with jpg and gif but no joy...

Can anyone help: http://www.leonpaul.com/acatalog/catalogbody.html shop home is the button I am fiddling with...

Could there be something somewhere else css etc that is blocking rollovers?

Thanks.

[fergusw]

Alex, You have specified your navigation with the rollovers twice on the page AND you haven't defined your rollovers correctly.

First, the correct use of the mouseover event:

<a href="http://www.leonpaul.com/acatalog/catalogbody.html">
<img id="nav_storetop" border="0" onmouseover="SwapImage('nav_storetop','shop_home3_ro.gif')" onmouseout="RestoreImage()" src="http://www.leonpaul.com/acatalog/shop_home3.gif" alt="Return to catalog home page" name="nav_storetop"/>
</a>

i.e. the onmouseover and onmouseout events are applied to the <img> element.

Second, you have defined the navigation twice - top and bottom. This means that each of the navigation elements are defined twice.
i.e. there are to image elements called "nav_storetop" on the page.

This means that the javascript functions SwapImage and RestoreImage cannot clearly define which element they should perform the action against as there are two identical ones.
Change the id/name of these elements to avoid duplicates.

[alexrpaul]

Thanks Fergus,

I changed the code on the first one and removed the lower nav bar and they all started working so I went back on the first button to the code in the AUG and it works perfectly. I guess the conflicts caused by th esecond nav bar were the problem.

Cheers

Alex