Question

I have a series of text links, which when rolled over, would cause a specific image link to fade in; that image would not fade/change to a different image until a different text link was rolled over.

I did find some basic script that does this, albeit without a fade affect when the image changes:

<script language="javascript">
function roll(img_name1, img_src1)
{
document[img_name1].src = img_src1;
}
</script>

<ul>
<li><a href="1.htm" onMouseOver="roll('poster', '1.png')">111</a>
<li><a href="2.htm" onMouseOver="roll('poster', '2.png')">222</a>
<li><a href="3.htm" onMouseOver="roll('poster', '2.png')">333</a>
</ul>

<br><br><br><br>

<p align="center"><img src="1.png" name="poster"></p> 

A perfect example is http://sharifabraham.com/projects/, which I discovered in a similar post: hover on text link to change image. I’ve tried to edit and use the code in both of the aforementioned links, but to no avail. Any insight on what to do is much appreciated.

Answer 1

I’ve dropped the inline JS code since it’s not the prefered way.

I’ve added a data-attribute to the lis which contain the image to load.

$(document).ready(function() {
  $('ul.image-switch li').mouseover(function() {
    var image_src = $(this).data('image');
    var img = $('.image-container img');
    if (img.attr('src') != image_src) { // only do the fade if other image is selected
      img.fadeOut('slow', function() { // fadeout the current image
        img.attr('src', img).fadeIn(); // load and fadein new image
      });
    }
  });
});

<ul class="image-switch">
  <li><a href="1.htm" data-image="1.png">111</a>
  <li><a href="2.htm" data-image="2.png">222</a>
  <li><a href="3.htm" data-image="2.png">333</a>
</ul>

<br><br><br><br>

<p align="center" class="image-container"><img src="1.png" name="poster"></p> 

EDIT

Sorry made a type.

DEMO: http://jsfiddle.net/yVcV3/1/

EDIT 2

http://jsfiddle.net/yVcV3/2/