Image and Text Swap Problem
Hi,
I'm having problems trying to accomplish an image/text swap.
Here's my jQuery code:
-
$(function swapImage() {
$(".thumb_detail a").click(function() {
$("#largeImg")[0].src = $(this).attr("href");
$(".thumb_detail a").removeClass("active");
$(this).addClass("active");
return false;
});
});
...here's my CSS:
-
.thumb_detail a {color:#000000; text-decoration:none;}
.thumb_detail a:hover, .thumb_detail a.active {color:#000000; text-decoration:line-through; }
...and here's my HTML code:
-
<p><img id="largeImg" src="../img/sample/product-detail03.jpg" alt="large image" width="220" height="390" alt="Current Product" /></p>
...
<div id="thumb_detContainer">
<div class="thumb_detail">
<a href="../img/sample/product-detail03.jpg" title="James getting dunked"><img src="../img/sample/product-image03.jpg" alt="small image" width="50" /></a> 1</a>
</div>
<div class="thumb_detail">
<a href="../img/sample/product-detail04.jpg" title="Image 2"><img src="../img/sample/product-image04.jpg" alt="small image" width="50"/></a> 2</a>
</div>
</div>
The goal is that when a user clicks a thumbnail, the larger image changes. That works fine. Additionally, the text changes to it's active state on mouseover (controlled in the styles). That works fines too. Furthermore, when a user clicks either the thumbnail or the text, the text should remain in it's active state (which is text-decoration: strike-through). Again, fine. The problem is that it's also putting the text-decoration on the image. I've tried numerous variations with over the past two days (two separate hrefs for the image and text; with separate classes; attempted to get the child element of thumb_detail - the image, so as to prevent the strikethrough or the text, so as to provide it; etc.). Unfortunately, my knowledge of jQuery is less than basic, so I'm stuck.
I'd appreciate some help/direction on this.
Thanks in advance,
Stephen