懸停在文字上以改變圖像的淡入淡出

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/