Question

也许这是一个简单的问题，但当鼠标悬停在图像上时（图像不是链接，只是图像），当您想要更改图像时，Rails的优良做法是什么？

Answer 1

试试这个：

HTML：

<img id="demo_image" src="smiley.gif" alt="Smiley face" width="42" height="42" onmouseover="changeImage(this)" onmouseout="changeImage(this)" data-image2="http://mw2.google.com/mw-panoramio/photos/small/17287086.jpg">

JS：

function changeImage(img) {
    img = $(img);
   var in_url = img.attr('src'),
     out_url =  img.attr('data-image2');
   img.attr('src', out_url).attr('data-image2', in_url);
}

http://jsfiddle.net/X3zEq/9/

Answer 2

有两种方法可以做到这一点：

1）使用img标签，并使用javascript更改悬停时的img src属性

优点 - 图像将在不使用样式表的其他情况下打印或显示
缺点 - 需要javascript，这会增加系统的复杂性，减慢页面速度，并且可能在某些情况下无效。如果使用ajax重新加载某些内容，则需要确保重新应用事件或其他内容。

2）使用div（或其他非img元素），并通过在css中设置的background属性显示图像。然后，您可以添加其他:hover规则，以便在悬停时显示备用图片。

优点 - 用css完成的所有事情。即使在部分重新加载页面后，也能快速保证工作。
缺点 - 不会打印，除非您使用该样式表进行打印。如果图像src是从您的数据库驱动的话，那就更难了。

注1） - 你不能做一个使用css来改变img标签背景的“混合”方法，因为图像标签的背景是在图像后面，因此无法看到：你要改变图像背后的“层”

注2） - 如果您将js与img标记一起使用，请将备用图像路径放在data属性中，例如"data-hover-src="/images/pic2.png"。然后，您可以使用简单的标准javascript函数进行管理。

注3） - 如果图像src是数据库生成的（例如，它是用户上传的图像），你可以仍然通过css执行，但你需要通过放置将css转换为元素的style属性。

关于哪条路走下去的决定有点复杂，但可以归结为“如果图像是内容，例如用户已经上传，则使用img标签。如果图像是外观的一部分你的网站，使用CSS“。但是，您可以在任何一种情况下使用这两种方法进行一些工作。

另请参阅：When to use IMG vs. CSS background-image?和Div Background Image or Using IMG Tag

Answer 3

我们假设这是您的a代码，为其添加一个类和一个ID（如果需要）

<%= image_tag "xyz.jpg", class: "change-image" %>

现在在js文件中

$(".change-image").hover(function(){
  $(this).attr("src") = // url of the new image
});

Answer 4

让我们有一张图片

 <%= image_tag "image.jpg", id: "img" %>

现在使用jQuery

在js中

$(function() {
  $("#img")
    .mouseover(function() { 
       var src = $(this).attr("src").replace("image.jpg", "over.jpg");
       $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over.jpg", "image.jpg");
       $(this).attr("src", src);

    });
 });

Rails：悬停时更改图像？

4 个答案: