jquery - 使用jQuery更改图像源

  显示原文与译文双语对照的内容

我有一些图像和它们的翻转图像。 使用 jQuery,我想在 onmousemove/onmouseout事件发生时显示/隐藏翻转图像。 我的所有图像名称都遵循相同的模式,如下所示:

原始图像:Image.gif

翻转图像:Imageover.gif

我想在onmouseover和onmouseout事件中插入和删除图像源的"上方"部分。

如何使用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);
 });
});


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

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

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


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

等等。

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

不限制你到"这里图像"和"那个图像"的通用解决方案可能是将'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"]);
 }

如果你要寻找的解决方案是一个动画按钮,那么你可以做的最好的事情就是使用精灵和CSS的组合。 sprite是一个巨大的图像,包含来自你站点( 页眉,logo,按钮和所有你拥有的装饰)的所有图像。 你使用的每个映像都使用一个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').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); 
});

...