Javascript - Swap Image and Raise Div Height on Mouseover
I have a Javascript effect I need to implement as quickly as possible. I have a target image that I need to change whenever someone hovers over a floating thumbnail. I also need the thumbnail to raise 10-15 px higher when the user hovers over it. So far, I have the following code:
- <div id="rotator">
<img id="target" src="images/banner1.png" />
<div class="left" id="thumbImage">
<a rel="lightbox" id="1thumb" title="Thumbnail 1" href="images/banner1.png" class="thumb lightbox highlight">
<img alt="images/banner1.png" src="images/thumb1_off.png">
</a>
<a rel="lightbox" id="2thumb" title="Thumbnail 2" href="images/banner2.png" class="thumb lightbox">
<img alt="images/banner2.png" src="images/thumb2_off.png">
</a>
</div>
</div>
Here is my Javascript:
- $(document).ready(function () {
$("a.thumb").hover(function () {
$(this).addClass('highlight')
.siblings('a.highlight')
.removeClass('highlight');
$('#target').attr('src', this.href);
//$(this).attr('src', "images/thumb1_over.png)");
});
});
When I run this, I am able to see the target image change. However, i'm stuck trying to add code to this to raise the thumbnail image.
Any quick guidance will help.