jQuery，图像在悬停时改变 [英] jQuery, image changing on hover

问题描述

好的，所以我有动态生成图像通过PHP，所以不一定相同的图像结果。我花了最后四个小时扫描互联网，尝试jQuery和/或CSS无数的事情，我提出了以下工作原理。

Okay, so I have dynamically generated images via PHP, so not necessarily the same images result. And I've spent the last four hours scanning the internet and trying countless things with jQuery and/or CSS, and I've come up with the following that works.

    <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 has a transparent background.

现在，在鼠标悬停时，它显示Market.png，透明的背景部分是tile_4.jpg，outout mouseout是tile_4.jpg。

Now, the above works. On mouseover, it displays Market.png with the transparent background part being tile_4.jpg and out mouseout it is tile_4.jpg.

我想知道：方法来完成与上面的jQuery或CSS完全相同的事情？我没有想出来，我花了几个小时的尝试，但我宁愿做一些别的，如果自上述以来（尽管大量重复，上述格式重复目前大约100次，但我有计划

What I want to know: is there ANY way to accomplish the exact same thing as the above with jQuery or CSS? I haven't figured it out, and I've spent hours trying, but I'd rather do something else if at all possible since the above (with massive repetition, the above format is repeated currently around 100 times, but I have plans to expand it to over a 1000 times) will become a bandwidth hog.

推荐答案

您可以为每个< img /> 元素，例如xyz（请选择更好的名称），然后利用 hover（）函数。考虑到您的图片是动态的，您可以使用额外的数据属性呈现图片标记，以用作替代或悬停图片来源。最后，你可以这样渲染：

You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the "alternate" or "hover" image source. In the end, you might render something like this:

<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 属性：

And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:

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

然后就像使用一小部分jQuery直接执行函数一样简单事件绑定：

And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:

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

• 工作jsFiddle示例 （版本1）



Andres Separ 的评论中的示例。使用此选择器，您不需要使用标记类装饰图像。它还将预加载备用源图像以帮助消除悬停时的任何滞后或闪烁：

Here is a spin on Andres Separ's example from the comments. With this selector, you don't need to decorate your images with a marker class. It will also pre-load the alternate source image to help eliminate any lag or flicker when hovering:

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







• 工作jsFiddle示例 （版本2）



这篇关于jQuery，图像在悬停时改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！