用jQuery交換圖像

我想爲我的菜單中的某些圖像添加翻轉效果。用jQuery交換圖像

該菜單目前是一個樣式無序列表。

<ul id="myMenu"> 
    <li> <a href=""><img src="apple_faded.gif"></a></li> 
    <li> <a href=""><img src="banana_faded.gif"></a></li> 
</ul>

該列表通過循環動態生成。當我將鼠標懸停在此<li>上並使用jQuery執行操作時，我想要從圖像名稱中刪除「_faded」部分。

我知道這是可能的，只是不知道如何。

UPDATE：

這裏的工作解決方案：

$("#myMenu li").mouseover(function(){ 
    var image = $(this).find("img"); 
    image.attr("src", image.attr("src").replace("_faded", "")); 
}).mouseout(function(){ 
    var image = $(this).find("img"); 
    image.attr("src", image.attr("src").replace(".gif", "_faded.gif")); 
});

來源

2011-09-08 santa

你有多遠？將任務分解爲多個小任務，如：1.添加事件; 2.獲取元素; 3.替換元素屬性值; –

並非萬無一失，但這裏有一個jQuery的解決方案。

$('#myMenu li').hover(function() { 
    var image = $(this).find('img:eq(0)'); 
    image.src = image.src.replace('_faded', ''); 
}, function() { 
    var image = $(this).find('img:eq(0)'); 
    image.src = image.src.replace('.gif', '_faded.gif').; 
});

你做知道你可以用CSS這樣做也？只是刪除您的圖片，給你的菜單項的ID，你可以在你的<li> S設定背景圖片：

#myMenu li#apple  { background: url('apple_faded.gif'); } 
#myMenu li#apple:hover { background: url('apple.gif'); } 

/* Do the same for the other elements */

來源

2011-09-08 16:01:47 Blender

this.src ....不需要使用jq attr – redsquare

@redsquare：謝謝。我只是因爲某種原因一直使用'.attr（）'... – Blender

只是'this.src' - 不創建jquery對象 – redsquare

這其實很簡單。你只使用jQuery中的hover()方法：

$('img').hover(function() 
{ 
    $(this).prop('src', function(i, oldSrc) 
    { 
     return oldSrc.replace(/_faded/gi, ''); 
    }); 
}, function() 
{ 
    $(this).prop('src', function(i, oldSrc) 
    { 
     return oldSrc.replace(/.gif/gi, '_faded.gif'); 
    }); 

});

來源

2011-09-08 16:02:18 Tejs

$('#myMenu img').mouseover(function(){ 
    $(this).attr('src', $(this).toString().replace('_faded','')); 
}).mouseout(function(){ 
    $(this).attr('src', $(this).toString().replace('.gif','_faded.gif')); 
});

我希望這有助於

來源

2011-09-08 16:03:17

我認爲這將definetaly幫助：

風格：

#menu1 { 
background-image: url('apple_faded.gif'); 
} 

#menu2 { 
background-image: url('banana_faded.gif'); 
}

HTML：

<ul id="myMenu"> 
    <li id="menu1" onmouseover="this.style='background-image: url(apple.gif);'"> </li> 
    <li id="menu2" onmouseover="this.style='background-image: url(banana.gif);'"> </li> 
</ul>

它不是jQuery，它是JS。

來源

2011-09-08 16:05:13 Akos

你可以使用字符串拆分，然後進行一些連接。

<body> 


    <ul id="myMenu"> 
      <li><img src="apple_faded.gif"></li> 
      <li><img src="banana_faded.gif"></li> 
     </ul> 
     <script> 
     $('li img').mouseover(function(e) { 
      var current = $(this); 
      var name = current.attr('src'); 
      var original = name.split('_'); 
      var swap = original[0]; 
      var swapname = swap + '.gif'; 
      //alert(swapname); 
      current.attr('src',swapname); 
     }); 
     </script> 
     </body>

來源

2011-09-08 16:11:40 George

如果您正在加載使用javascript的列表中，您可能希望看到.live（）函數，http://api.jquery.com/live/，將列表中的每個新元素添加事件，例如，

$(".liElement img").live("mouseover", function(event) { 
     //Do removal 
});

來源

2011-09-08 16:20:32 Lautaro

用jQuery交換圖像

回答

相關問題