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

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

原始图片:Image.gif 翻转图像:Imageover.gif

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

如何使用jQuery来实现它?

当前回答

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

其他回答

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

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

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

一个通用的解决方案，不限制你只有“这个图像”和“那个图像”可能是添加“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

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

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

2011-02-24 18:44:42

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

推荐文章

最新文章

标签