jQuery從文本鏈接交換圖像，例如工作圖像鏈接

Question

我有一些具有jquery功能的圖像，當用戶將鼠標放在圖像上時可以交換圖像。 例如，以下工作功能將area_03.gif與area_03-over.gif交換，並在用戶將鼠標移離圖像時再次交換。 我還想放置一些文本鏈接，這些鏈接也可以滾動到相應的圖像上，您有什么想法嗎？

編輯：“圖像交換功能已與我提供的功能一起使用。我遇到的問題是使文本鏈接交換正常工作”

 HTML:
<!--Links --> <a href="">Another Link</a>
        <a href="nodes1-nodes21.shtml">Nodes 1 to 21</a>
        <a href="venders1-nodes5.shtml">Venders 1 to 5</a>


<!-- Images -->
        <a href="nodes1-nodes21.shtml" >
            <img class="forhover" src="images/area_03.gif" alt="Link Nodes 1 to 21" width="45" height="27"  id="area_03" />
        </a>

        <a href="venders1-nodes5.shtml" >
            <img class="forhover" src="images/area_05.gif" alt="Link Venders 1 to 5" width="45" height="27"  id="area_05" />
        </a>



Working jquery


$(document).ready(function() {
    $('img.forhover').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
        }, function(){
    $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
     });
    });

Answer 1

我懷疑您可以使用jquery mouseenter和mouseleave函數來管理它

Answer 2

這是圖像的解決方案，而不是文本。

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg"> 

JS：

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});

演示： http : //jsfiddle.net/Diodeus/gYyBL/

Answer 3

您是否嘗試過在<a>元素中使用.text（）jQuery函數？