Clever Geek Handbook

Onmouseover for link_to image_tag

I have an associated image_tag that I would like to change the images on hover. I thought the following would work, but the image doesn't switch on mouse:

<%= link_to image_tag("new_step.png"),new_project_step_path(@project), :class=> "newStep", :onmouseover => "new_step_highlighted.png"%>

I also tried editing the css, but that unfortunately didn't work either:

.newStep{
    background: url('../assets/new_step_highlighted.png');
}

.newStep:hover{
    background: url('../assets/new_step_highlighted.png');
}

In both cases, only the "new_step.png" image appears. How can I fix this? Thanks in advance for your help!

+3


source to share


3 answers


For css only, you need to have both images used as the background property of the tag link_to

(actually the tag a

). With what you wrote, you had one image "hardcoded" in the dom with image_tag

and tried to change the background property of the link. newStep

is actually a class link_to

.

<%= link_to "Text", new_project_step_path(@project), :class => "newStep" %>

Then css (btw you don't need to add ".." to your assets folder path):



.newStep {
    display: inline-block;
    width: your-image-width;
    height: your-image-height;
    background: url('/assets/new_step.png');
}

.newStep:hover {
    background: url('/assets/new_step_highlighted.png');
}

Here's a fiddle : http://jsfiddle.net/km6Sp/

+6


source


You can do it without changing the CSS, with less code:



<%= link_to some_route_path do
    image_tag("find.png", onmouseover: "this.src='#{asset_path('find_sel.png')}'", onmouseout: "this.src='#{asset_path('find.png')}'")
end %>
+8


source


It turns out Sparda's answer was correct, except that my image path was actually just "/assets/new_step.png". Images were not showing up due to a problem with my CSS file.

0


source






More articles:


All Articles