Additional Image Hover - jQuery

[delia]

Yes, plesae just left them out.

I've made a few changes as per your advise, but the main image remains unchanged when I roll over the additional images. Please let me know what I did wrong or miss???

Please find below the code:

<div id="productMainImage">

<a href="#"><img src="images/dvd/picture_01.jpg" width="558" height="558"></a>

</div>


<div id="productAdditionalImages">

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_01.jpg" width="135" height="135"></a></div>

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_02.jpg" width="135" height="135"></a></div>

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_03.jpg" width="135" height="135"></a></div>

</div>

Here's the source code from my demo site:

<div id="productAdditionalImages">

<div class="additionalImages centeredContent back" style="width:50%;">
<a href="images/shoe_black.jpg"><img src="images/shoe_black.jpg" alt="Additional Images Hover" title=" Additional Images Hover " width="80" height="80" /></a></div>
<div class="additionalImages centeredContent back" style="width:50%;">
<a href="images/shoe_red.jpg"><img src="images/shoe_red.jpg" alt="Additional Images Hover" title=" Additional Images Hover " width="80" height="80" /></a></div>
<br class="clearBoth" />

</div>
Note that the a href actually refers to an image. You just have # instead.