logo标签列表

jQuery，鼠标悬停时更改图像

javascriptjqueryhtmlcss
21

好的，所以我通过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。

我想知道：是否有任何方法可以使用jQuery或CSS完成与上述完全相同的操作？我还没有想出来，而且尝试了几个小时，但我宁愿做其他事情，如果可能的话，因为上述方法（大量重复，当前格式已重复约100次，但我计划将其扩展到超过1000次）将成为一个带宽占用者。

问题出现在动态生成的图像并非总是相同的情况下。例如，其中一个其他图像被编码为：<img style='background:url(images/tile_4.jpg)' src="images/2.jpg" onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/2.jpg'" /> 这使得简单切换变得不可能。 - Witold Kowelski
3个回答
59

您可以为每个元素添加一个类名，例如'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" />

然后，为了对每个图像应用切换功能，您可以编写一个小函数，在悬停/离开时交换图像的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" />

现在这是一段很棒的脚本。 - saurabh
2
@Cory 做得好！我建议稍微改进一下！ $('img[data-alt-src]').each(function(){ var $this = $(this); new Image().src = $this.data('alt-src'); $this.hover(sourceSwap, sourceSwap); }); - Andres Separ
@Cᴏʀʏ 那么实际上，“sourceSwap”函数会使浏览器从缓存中加载替代图像，而不执行DOM操作（交换源）吗？ - luqo33
@luqo33：它仍然执行DOM操作。DOM层实际上并不知道，是浏览器通过预加载（预下载+缓存）图像来变得聪明，这样当进行图像源交换时，它不必在显示它们之前花费时间下载图像，而是从缓存中加载它们。行为与没有预加载时完全相同，但只有在第一次按需下载图像源后才会出现。 - Cᴏʀʏ
@Cory 已确认，谢谢 :) - luqo33
显示剩余7条评论
15

jQuery

您可以使用 mouseover 和 mouseout 事件：

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

通过使用CSS，您可以轻松地从HTML中删除onmouseout和onmouseover属性，使您的代码更加整洁。

CSS

但是，最简单的方法是使用CSS：

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

img:hover {
  background-image: url('images/Market.png');
}
并不总是相同的图像，我说它是动态生成的。例如，另一张图片的代码如下：<img style='background:url(images/tile_4.jpg)' src="images/2.jpg" onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/2.jpg'" /> 这样就可以轻松地进行切换了。 - Witold Kowelski
@WitoldKowelski，你需要提供数据源。你从哪里获取这些数据？是JSON格式的吗？ - krishwader
这是用PHP编写的，其中图像src（因此onmouseout）来自MySQL数据库。或者这不是你在问什么？ - Witold Kowelski
我认为您必须在这个问题中添加一个PHP标签，并在其中动态添加图像的代码，以及从服务器接收到的数据的一小段片段。 - krishwader
好的，我可以这样做。如果有帮助的话。锚链接并不是很重要，而且它都是通过一个while循环调用多个PHP函数来实现的，但控制显示哪个图像的变量被编码为src=\"images/$ImageNumber.jpg\"，其中$imageNumber是我第一条评论中的2。如果数据库中没有对应于DB查询的行，则结果将通过另一个函数运行，该函数将纯粹地将src打印为src='images/tile_4.jpg'。 - Witold Kowelski
4
当然，用jQuery很容易实现。
$('img').hover(function(){
    $(this).attr('src','images/Market.png');
},function(){
     $(this).attr('src','images/tile_4.jpg'); 
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接