使用 jQuery 更改翻转时的图像源
Posted
技术标签:
【中文标题】使用 jQuery 更改翻转时的图像源【英文标题】：Change the image source on rollover using jQuery 【发布时间】：2010-10-07 02:56:28 【问题描述】：我有一些图像及其翻转图像。使用 jQuery，我想在 onmousemove/onmouseout 事件发生时显示/隐藏翻转图像。我所有的图像名称都遵循相同的模式，如下所示：
原图：
Image.gif翻转图片：
Imageover.gif
我想分别在 onmouseover 和 onmouseout 事件中插入和移除图像源的 "over" 部分。
我如何使用 jQuery 来做到这一点？
【问题讨论】：
我为初学者编写了一个带有示例的小指南，Change image with javascript (or jQuery)。还有一个不使用jQuery的例子。 鼠标悬停时更改图像dotnetspeaks.com/DisplayArticle.aspx?ID=89 正是我想要的。感谢您发布问题！ 我遇到了这样的问题(My Question)。这个问题的答案很好，但是在 IE9 中，每次你越过按钮时，都会有额外的图像请求，这很糟糕。有没有人有更好的答案？ 【参考方案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);
);
);
【讨论】：
如果 src 是带有 .在其中（如 www.example.com） 如果您使用像 www.over.com 这样的域，或者在 URI 中的其他位置有over，这也不起作用。
我可以建议用 .replace("over.gif", ".gif"); 编辑最终的 .replace；
感谢您发布此信息。我希望你不介意我把它放在我的博客上。我的博客就像一个“笔记本”，当我忘记某些事情时，它就是我的“随身物品”。
不必使用“.match(/[^\.]+/)”方法和正则表达式。 ".replace(".gif", "over.gif") 就足够了。【参考方案2】：
我知道你问的是使用 jQuery，但你可以在使用 CSS 关闭 JavaScript 的浏览器中实现相同的效果：
#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
【讨论】：
是的，但在 IMAGE 元素上执行此操作有点困难 :) 除此之外，CSS 意味着内容与表示的分离。如果你这样做，你就加入了这些事情；）你不能在大型网站上拥有这个，对吧？ 我同意你关于 css 的看法，但似乎问题作者想要一个通用的解决方案，可以同时应用于多个图像。 这个解决方案是最可取的选择，除非你正在做一些效果。我在想完全相同的事情+1 这是最好的解决方案。为避免等待新图像（网络请求），请使用单个 image.jpg 并使用 background-position 来显示/隐藏好图像。 @kheraud 移动单个图像是一个很好的解决方案，但它是否是最好的取决于图像大小。例如，在网速较慢的情况下，在一个巨大的文件中下载两个 1920 像素宽的图像会花费非常长的时间。对于图标和小图像，虽然效果很好。【参考方案3】：改编自 Richard Ayotte 的代码 - 要在 ul/li 列表中定位 img（通过此处的包装 div 类找到），如下所示：
$('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')
);
【讨论】：
【参考方案4】：不限于“此图像”和“那个图像”的通用解决方案可能是将“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"]);
【讨论】：
【参考方案5】：在一段时间前寻找解决方案时，我发现了一个与以下类似的脚本，经过一些调整后，我开始为我工作。
它处理两个图像，几乎总是默认为“关闭”，鼠标关闭图像（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>
【讨论】：
我意识到上述函数将针对当前编码的 DOM 中的所有图像执行。提供更多上下文将使其将效果集中在特定的 img 元素上。【参考方案6】：我做了类似下面的代码:)
仅当您有第二个以 _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);
);
【讨论】：
【参考方案7】：如果您正在寻找的解决方案是动画按钮，那么您可以做的最好的改进就是结合精灵和 CSS 来提高性能。 sprite 是一个巨大的图像，包含来自您网站的所有图像（标题、徽标、按钮和您拥有的所有装饰）。您拥有的每张图片都使用一个 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（或任何框架）是最好的。
玩得开心！
【讨论】：
【参考方案8】：<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();
【讨论】：
【参考方案9】：如果您有多个图像，并且需要不依赖于命名约定的通用图像。
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')
)
);
【讨论】：
这是给我的。只要记住将 javascript 放在一个函数中执行它，即当 DOM 准备好 "$(function() );" 实际上它在页面仍在加载时触发，当您的鼠标光标实际上在选择器上时它会替换 url 所以效果是反转的【参考方案10】：$('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);
);
【讨论】：
【参考方案11】：$('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()
等等。
它应该可以工作，我没有测试它:)
【讨论】：
+1 Doh，忘了悬停事件助手！关于向图像添加类的好建议 - 确实是最佳实践:) 这是更好的解决方案，因为它缓存了旧的图像源。 不利的部分是，如果图片在页面底部并且有10-20张图片，那么布局就会变得很奇怪。【参考方案12】：我希望有一个像这样的 über one 班轮：
$("img.screenshot").attr("src", $(this).replace("foo", "bar"));
【讨论】：
【参考方案13】：<!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>
【讨论】：
【参考方案14】： /* Teaser image swap function */
$('img.swap').hover(function ()
this.src = '/images/signup_big_hover.png';
, function ()
this.src = '/images/signup_big.png';
);
【讨论】：
请记住，这样做意味着用户在第一次悬停时会在浏览器获取图像时看到暂停。 @Tyson 讨厌晚点上火车，但您可以通过 Javascript 或 CSS 预加载图像 在 Chrome 37 上也不起作用。 $(this).attr("src", src) 工作正常。以上是关于使用 jQuery 更改翻转时的图像源的主要内容，如果未能解决你的问题，请参考以下文章