onmouseover for link_to image_tag

Question

I have a linked image_tag that I would like to change images on mouseover. I thought the following would work, but the image is not switching on mouseover:

<%= 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 this unfortunately didn't work either:

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

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

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

Answer 1

You can do it without modifying 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 %>