悬停在文字上以改变图像的淡入淡出

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/，我在一个类似的帖子发现：hover on text link to change image。我试图编辑和使用上述两个链接中的代码，但无济于事。任何有关做什么的洞察力非常感谢。

Answer 1

我已经放弃了内联JS代码，因为它不是首选方式。

我已将数据属性添加到包含要加载的图像的li。

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

对不起制成的类型。

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

EDIT 2

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

Answer 2

使用jQuery褪色的图像

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