Наведите курсор на текст, чтобы изменить изображение с исчезновением

Question

У меня есть серия текстовых ссылок, которые при наведении на них приводят к потере определенной ссылки на изображение; это изображение не будет исчезать / меняться на другое изображение, пока не будет перевернута другая текстовая ссылка.

Я нашел какой-то базовый скрипт, который делает это, хотя и без эффекта затухания при изменении изображения:

<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> 

Прекрасным примером является http://sharifabraham.com/projects/,, который я обнаружил в аналогичном посте: наведите курсор на текстовую ссылку, чтобы изменить изображение . Я пытался редактировать и использовать код в обеих вышеупомянутых ссылках, но безрезультатно. Любое понимание того, что делать, очень ценится.

Answer 1

Я отбросил встроенный код JS, поскольку это не самый предпочтительный способ.

Я добавил атрибут данных к li s, которые содержат изображение для загрузки.

$(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

Извините, что сделал тип.

ДЕМО: http://jsfiddle.net/yVcV3/1/

РЕДАКТИРОВАТЬ 2

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

Answer 2

Используйте jQuery для выцветания изображений

http://api.jquery.com/category/effects/fading/