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

小开

最佳答案

准备就绪:

$(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);


});
});

小开

$('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(){

等等。

它应该工作，我没有测试它:)

小开

我知道你在问使用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);
}

有一个更长的描述在这里

然而，更好的方法是使用sprites: simple-css-image-rollover

小开

<!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>

小开

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

小开

我希望有一个über这样的一行:

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

小开

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

小开

如果你正在寻找的解决方案是一个动画按钮，那么你能做的最好的提高性能的方法是精灵和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(或任何框架)是最好的。

玩得开心!

小开

如果您有多个图像，并且需要一些不依赖于命名约定的通用图像。

超文本标记语言

<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')
})
});

小开

一个通用的解决方案，不限制你只有“这个图像”和“那个图像”可能是添加“onmouseover”和“onmouseout”标签到HTML代码本身。

超文本标记语言

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

JavaScript

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

这取决于您的设置，也许这样做会更好(并且需要更少的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"]);
}

小开

<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();

小开

在寻找解决方案的时候，我发现了一个类似于下面的脚本，经过一些调整后，我得到了为我工作。

它处理两个图像，几乎总是默认为“off”，即鼠标不在图像上(image-example_off.jpg)，以及偶尔的“on”，即鼠标悬停时，显示所需的替代图像(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>

小开

我做了如下代码:)

只有当你有一个名为_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);
});

小开

改编自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') }
);