使用jQuery更改翻转时的图像源

Question

使用jQuery更改翻转时的图像源

我有一些图片和他们的滚动图像。使用jQuery，当onmousemove/onmouseout事件发生时，我希望显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式，如下所示：

原始图像：Image.gif

滚动图片：Imageover.gif

我想插入并删除“完毕”在onmouseover和onmouseout事件中图像源的部分。

我如何使用jQuery来完成它呢？

Answer 1

准备就绪：$(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);         });});对于使用url图像源的用户：$(function() {         $("img")             .mouseover(function() {                var src = $(this).attr("src");                var regex = /_normal.svg/gi;                src = this.src.replace(regex,'_rollover.svg');                $(this).attr("src", src);             })             .mouseout(function() {                var src = $(this).attr("src");                var regex = /_rollover.svg/gi;                src = this.src.replace(regex,'_normal.svg');                $(this).attr("src", src);             });     });

Answer 2

我知道您在询问如何使用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);}有一个更长的描述这里然而，更好的做法是使用精灵：简单-css-图像翻转

Answer 3

如果您有多个图像，并且需要一些通用的、不依赖于命名约定的东西。HTML<img&nbsp;data-other-src="big-zebra.jpg"&nbsp;src="small-cat.jpg"><img&nbsp;data-other-src="huge-elephant.jpg"&nbsp;src="white-mouse.jpg"> <img&nbsp;data-other-src="friendly-bear.jpg"&nbsp;src="penguin.jpg">JavaScript$('img').bind('mouseenter&nbsp;mouseleave',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(this).attr({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src:&nbsp;$(this).attr('data-other-src')&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,&nbsp;'data-other-src':&nbsp;$(this).attr('src')&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;})});