使用jQuery更改翻轉圖像源

435

我有幾張圖像及其翻轉圖像。使用jQuery，我想在onmousemove/onmouseout事件發生時顯示/隱藏翻轉圖像。我所有的圖像名稱遵循相同的模式，就像這樣：使用jQuery更改翻轉圖像源

原始圖像：Image.gif

鼠標經過圖像：Imageover.gif

我想插入和取出「過度」的部分圖像來源分別在onmouseover和onmouseout事件中。

如何使用jQuery來做到這一點？

來源

2009-02-12 Sachin Gaur

+10

正是我在找的。感謝您發佈問題！ – 2011-02-18 06:40:42

鼠標懸停更改圖像http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=89 – Sumit 2010-12-07 08:15:02

我有這樣的問題（[我的問題]（http://stackoverflow.com/q/10600678/381819））。這個問題的答案很好，但是在IE9中，每當你瀏覽按鈕時，都會有額外的圖像請求，這很不好。任何機構有更好的答案？ – Iman 2012-05-16 08:51:15

613

要設置的準備：

$(function() { 
    $("img") 
     .mouseover(function() { 
      var src = $(this).attr("src").match(/[^\.]+/) + "over.gif"; 
      $(this).attr("src", src); 
     }) 
     .mouseout(function() { 
      var src = $(this).attr("src").replace("over.gif", ".gif"); 
      $(this).attr("src", src); 
     }); 
});

來源

2009-02-12 07:31:48

這不工作，如果src是一個絕對的URL與。（如www.example.com） – 2011-02-22 23:32:13

如果您使用www.over.com這樣的域名，或者在URI的其他地方有`over`，這也不起作用。 – 2011-04-04 17:32:21

+30

我可以建議使用.replace（「over.gif」，「.gif」）編輯最終的.replace。 – 2011-09-13 15:34:44

$('img.over').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 
    }); 
});

您可能希望將類圖像從第一行更改。如果您需要更多圖片類別（或不同路徑），您可以使用

$('img.over, #container img, img.anotherOver').each(function(){

等等。

它應該工作，我沒有測試它:)

來源

2009-02-12 07:51:06

113

我知道你問有關使用jQuery，但你可以實現在瀏覽器同樣的效果已關閉JavaScript使用CSS：

#element { 
    width: 100px; /* width of image */ 
    height: 200px; /* height of image */ 
    background-image: url(/path/to/image.jpg); 
} 

#element:hover { 
    background-image: url(/path/to/other_image.jpg); 
}

有一個較長的描述here

更妙的是，然而，就是用精靈：simple-css-image-rollover

來源

2009-02-12 07:54:36 Tyson

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>JQuery</title> 
<script src="jquery.js" type="text/javascript"> </script> 
<style type="text/css"> 
    #box{ 
     width: 68px; 
     height: 27px; 
     background: url(images/home1.gif); 
     cursor: pointer; 
    } 
</style> 

<script type="text/javascript"> 

$(function(){ 

    $('#box').hover(function(){ 
     $('#box').css('background', 'url(images/home2.gif)'); 

    }); 
    $('#box').mouseout(function(){ 
     $('#box').css('background', 'url(images/home1.gif)'); 

    }); 

}); 
</script> 
</head> 

<body> 
<div id="box" onclick="location.href='index.php';"></div> 
</body> 
</html>

來源

2009-05-23 07:10:33

/* Teaser image swap function */ 
    $('img.swap').hover(function() { 
     this.src = '/images/signup_big_hover.png'; 
    }, function() { 
     this.src = '/images/signup_big.png'; 
    });

來源

2009-08-02 19:53:55 jonasl

我希望爲尤伯杯一個襯墊，如：

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));

來源

2011-02-24 18:44:42 chovy

$('img').mouseover(function(){ 
    var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif"); 
    $(this).attr("src", newSrc); 
}); 
$('img').mouseout(function(){ 
    var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif"); 
    $(this).attr("src", newSrc); 
});

來源

2011-03-24 07:10:40 iamrasec

如果您正在尋找的解決方案是一個動畫按鈕，那麼最好你可以做，以改善性能精靈和CSS的組合。精靈是一個巨大的圖像，包含您網站的所有圖像（標題，徽標，按鈕和所有裝飾）。您擁有的每張圖片都使用HTTP請求，而HTTP請求越多，加載所需的時間就越多。

.buttonClass { 
    width: 25px; 
    height: 25px; 
    background: url(Sprite.gif) -40px -500px; 
} 
.buttonClass:hover { 
    width: 25px; 
    height: 25px; 
    background: url(Sprite.gif) -40px -525px; 
}

0px 0px座標將從您的精靈的左上角。

但是，如果你正在開發一些與Ajax或類似的相冊，那麼JavaScript（或任何框架）是最好的。

玩得開心！

來源

2012-02-11 02:50:16 matt

如果您有多個圖像，並且您需要一些不依賴於命名約定的泛型。

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg"> 
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg"> 
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

的JavaScript

$('img').bind('mouseenter mouseleave', function() { 
    $(this).attr({ 
     src: $(this).attr('data-other-src') 
     , 'data-other-src': $(this).attr('src') 
    }) 
});

來源

2012-02-19 14:23:14

一個通用的解決方案，不限制你「這個形象」和「的形象」只可添加「的onmouseover」和「 onmouseout'標籤添加到HTML代碼本身。

HTML

<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />

的JavaScript

function swap(newImg){ 
    this.src = newImg; 
}

根據您的設置，也許這樣的事情會更好地工作（並需要更少的HTML修改）。

HTML

<img src="img1.jpg" id="ref1" /> 
<img src="img3.jpg" id="ref2" /> 
<img src="img5.jpg" id="ref3" />

的JavaScript/jQuery的

// Declare Arrays 
    imgList = new Array(); 
    imgList["ref1"] = new Array(); 
    imgList["ref2"] = new Array(); 
    imgList["ref3"] = new Array(); 

//Set values for each mouse state 
    imgList["ref1"]["out"] = "img1.jpg"; 
    imgList["ref1"]["over"] = "img2.jpg"; 
    imgList["ref2"]["out"] = "img3.jpg"; 
    imgList["ref2"]["over"] = "img4.jpg"; 
    imgList["ref3"]["out"] = "img5.jpg"; 
    imgList["ref3"]["over"] = "img6.jpg"; 

//Add the swapping functions 
    $("img").mouseover(function(){ 
    $(this).attr("src", imgList[ $(this).attr("id") ]["over"]); 
    } 

    $("img").mouseout(function(){ 
    $(this).attr("src", imgList[ $(this).attr("id") ]["out"]); 
    }

來源

2012-04-12 04:53:59 DACrosby

<img src="img1.jpg" data-swap="img2.jpg"/> 



img = { 

init: function() { 
    $('img').on('mouseover', img.swap); 
    $('img').on('mouseover', img.swap); 
}, 

swap: function() { 
    var tmp = $(this).data('swap'); 
    $(this).attr('data-swap', $(this).attr('src')); 
    $(this).attr('str', tmp); 
} 
} 

img.init();

來源

2012-04-15 17:39:50 Zegl

雖然尋找一個解決方案一段時間後，我發現了一個類似的腳本來下面，其中一些調整後，我得到了工作爲了我。

它處理兩個圖像，幾乎總是默認爲「關閉」，鼠標離開圖像的位置（image-example_off.jpg），偶爾會出現「開啓」，其中鼠標懸停的時間顯示所需的替代圖像（image-example_on.jpg）。

<script type="text/javascript">   
    $(document).ready(function() {   
     $("img", this).hover(swapImageIn, swapImageOut); 

     function swapImageIn(e) { 
      this.src = this.src.replace("_off", "_on"); 
     } 
     function swapImageOut (e) { 
      this.src = this.src.replace("_on", "_off"); 
     } 
    }); 
</script>

來源

2012-09-05 22:34:02

我做了類似下面的代碼:)

它的工作原理只是，當你有_hover命名第二個文件，例如，facebook.png和facebook_hover.png

$('#social').find('a').hover(function() { 
    var target = $(this).find('img').attr('src'); 
    //console.log(target); 
    var newTarg = target.replace('.png', '_hover.png'); 
    $(this).find('img').attr("src", newTarg); 
}, function() { 
    var target = $(this).find('img').attr('src'); 
    var newTarg = target.replace('_hover.png', '.png'); 
    $(this).find('img').attr("src", newTarg); 
});

來源

2013-02-14 14:06:38 Grzegorz

改編來自Richard Ayotte的代碼 - 要定位ul/li列表中的img（通過wrapper div class在此處找到），如下所示：

$('div.navlist li').bind('mouseenter mouseleave', function() {  
    $(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'), 
    'data-alt-src':$(this).find('img').attr('src') } 
);

來源

2016-07-15 14:29:05 anoldermark

使用jQuery更改翻轉圖像源

回答

相關問題