jQuery,悬停时图像变化

Question

好的,所以我通过PHP动态生成图像,因此不一定会生成相同的图像.我花了最后四个小时扫描互联网并用jQuery和/或CSS尝试无数的东西,我想出了以下有效的东西.

    <a href="build.php?x=1875&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1876&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1877&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1878&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1879&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>

Market.png具有透明背景.

现在,上面的工作.在鼠标悬停时,它显示Market.png,透明背景部分为tile_4.jpg,鼠标输出为tile_4.jpg.

我想知道的是:有没有办法用jQuery或CSS完成与上面完全相同的事情？我还没弄明白,我花了好几个小时尝试,但是如果可能的话,我宁愿做别的事情,因为上面的事情(大量的重复,上面的格式目前重复了大约100次,但我有计划将其扩展到超过1000次)将成为带宽生猪.

Answer 1

您可以为每个<img />元素添加一个类,例如'xyz'(请选择一个更好的名称),然后利用hover()函数.鉴于您的图像是动态的,您可以使用额外的数据属性渲染图像标记,以用作"备用"或"悬停"图像源.最后,你可以渲染这样的东西:

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" />
<img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" />

然后,为每个图像应用切换功能,您可以编写一个小函数,在hover-in/hover-out上交换图像src属性和data-alt-src属性:

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

然后就像使用一点点jQuery事件绑定直接执行函数一样简单:

$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});

这是一个工作示例(版本1):

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function () {
        $('img.xyz').hover(sourceSwap, sourceSwap);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

以下是Andres Separ在评论中的一个例子.使用此选择器,您无需使用标记类装饰图像.它还会预先加载备用源图像,以帮助消除悬停时的任何延迟或闪烁:

$(function() {
    $('img[data-alt-src]').each(function() { 
        new Image().src = $(this).data('alt-src'); 
    }).hover(sourceSwap, sourceSwap); 
});

这是第二个版本:

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function() {
        $('img[data-alt-src]').each(function() { 
            new Image().src = $(this).data('alt-src'); 
        }).hover(sourceSwap, sourceSwap); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

Answer 2

jQuery的

你可以使用mouseover和mouseout事件:

$("img").on({
 "mouseover" : function() {
    this.src = 'images/Market.png';
  },
  "mouseout" : function() {
    this.src='images/tile_4.jpg';
  }
});

这样,您就可以取出的属性onmouseout,并onmouseover从你的HTML和使你的代码整洁.

CSS

但是,最简单的方法是使用CSS:

img {
  background-image: url('images/tile_4.jpg');
}

img:hover {
  background-image: url('images/Market.png');
}