onMouseOver problem - photoshop html

[ojah]

I am currently messing around with the html put out by photoshop CS3.

I am attempting to create a menu from a sliced image. When areas of the image are MouseOvered, I need a different image to replace it.

Even though i'm changing the image source, only the first picture on the menu changes.

Below is a section of the html:


<tr>
<td onMouseOver="document.getElementById('hide').style.display='none';document.getElementById('show').style.display='inline';" onMouseOut="document.getElementById('show').style.display='none';document.getElementById('hide').style.display='inline';">
<img src="images/smiths_04.gif" width="105" height="38" alt="" id="hide"><img src="images/smiths_04a.gif" id="show" style="display:none" /></td>
<td>
<img src="images/Smiths_05.gif" width="16" height="38" alt=""></td>
<td onMouseOver="document.getElementById('hide').style.display='none';document.getElementById('show').style.display='inline';" onMouseOut="document.getElementById('show').style.display='none';document.getElementById('hide').style.display='inline';">
<img src="images/smiths_06.gif" width="195" height="38" alt="" id="hide"><img src="images/smiths_06a.gif" id="show" style="display:none" /></td>

The site can be viewed here (http://smithscycles.co.uk)....Hover over the first two menu items to see what I mean.

Thanks in advance!

[thetestingsite]

You have to have different ids on each element in order for that javascript to work right. Try appending an incrementing number to the end of each id (ex: show1, hide1, show2, hide2, etc). Be sure to change this part as well to point to the correct ids:



document.getElementById('hide').style.display='none';document.getElementById('show').style.display='inline';


Hope this helps.

[ojah]

Many thanks!!

Such a simple solution....serves me right for doing web design at 4am!

[ojah]

hmm, works perfectly offline, but is becoming distorted when viewed online.

Any ideas?

Visit Site (http://smithscycles.co.uk)