Rails: Change image on hover?

Question

Maybe an easy question, but what is good practice in Rails when you want to change an image when the mouse hover over the image (the image is not a link, just an image)?

Answer 1

Try this :

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

There are two ways to do this:

1) Use an img tag, and use javascript to change the img src attribute on hover

• Pros - images will print out or display in other situations where the stylesheet isn't used
• Cons - requires javascript, which adds complexity to your system, slows the page down, and may not work in some contexts. If some content is reloaded eg with ajax, you'll need to make sure the events are reapplied or whatever.

2) Use a div (or other non-img element), and show the image via the background property, set in your css. You can then add an additional :hover rule to show the alternate image on hover.

• Pros - everything done with css. Quick and guaranteed to work even after partial reload of the page.
• Cons - won't print, unless you use that stylesheet to print as well. Harder to do if the image src is driven from your database.

Note 1) - you can't do a "hybrid" approach of using css to change the background of the img tag, as the background of an image tag is behind the image, and so can't be seen: you'd be changing the "layer" behind the image

Note 2) - if you use js with an img tag, put the alternate image path in a data attribute, eg "data-hover-src="/images/pic2.png". Then you can manage it with a simple standard javascript function.

Note 3) - if the image src is database-generated (eg it's for an image a user has uploaded), you can still do it by css, but you need to do it by putting the css into a style attribute on the element.

The decision on which path to go down is a little complicated, but could be boiled down to "if the images are content, eg that users have uploaded, use an img tag. If the images are part of the look and feel of your website, use css". However, you can use either approach in either situation with a bit of work.

See also: When to use IMG vs. CSS background-image? and Div Background Image or Using IMG Tag

Answer 3

Let's assume this is your a tag, add a class and an id(if needed) to it

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

Now in js file

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

Answer 4

Lets there is an image

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

Now in js using jQuery

$(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);

    });
 });