I recently posted a question on Stack Overflow about displaying an image in a div when a specific link is hovered over, and thanks to the help of user adeneo, I was able to find a solution (jsFiddle):
HTML Markup:
<div id="imgs">
<img src="http://www.flash-slideshow-maker.com/images/help_clip_image020.jpg" alt="image 1">
<img src="http://www.nasa.gov/images/content/297522main_image_1244_946-710.jpg" alt="image 2">
<img src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg" alt="image 3">
</div>
<ul id="my-ul">
<li><a href="#" class="img1">hover to see image1</a></li>
<li><a href="#" class="img2">hover to see image2</a></li>
<li><a href="#" class="img3">hover to see image3</a></li>
</ul>
JavaScript Solution:
$('#my-ul a').on('mouseenter mouseleave', function(e) {
$('#imgs img').eq($(this).parent('li').index()).toggle(e.type==='mouseenter');
});
I am now looking for guidance on how to modify http://jsfiddle.net/ScAVW/1/ so that the images within the div change every second as follows: 1->2->3->1->2->3->1... continuously, unless one of the three links is hovered over. When a link is hovered over, the corresponding image should be displayed and the image rotation should pause. Once the mouse leaves the link, the images should resume changing within the div.