Rails: change hover image submission form with image_submit_tag

Question

What is the most elegant “rails” way to implement hovering on an image that represents a shape with good cross-browser functionality?

For image only, image_tag works fine:

<%= image_tag("mouse.png", :mouseover => "/images/mouse_over.png") %>

For image_submit_tag: mouseover does not work.

One of the ways that I thought was to use the html.erb file with css, but it has browser issues:

<%= image_submit_tag "", :class => "icon" %>

CSS

.icon { background-image: url('images/mouse.png')}
.icon:hover { background-image: url('images/mouse_over.png')}

Outside the rails, you can use javascript or css. What is the most elegant way to do this on rails with image_submit_tag?

Answer 1

image_submit_tag:

<%= image_submit_tag "mouse.png", 
:onmouseover => "this.src='assets/mouse_over.png'", 
:onmouseout => "this.src='/assets/mouse.png'"%>

image_submit_Tag image_tag : mouseover -. image_tag:

<%= image_tag "mouse.png", :mouseover => "mouse_over.png" %>

mouseover :

<img src="/assets/mouse.png" 
onmouseover="this.src='/assets/mouse_over.png'" 
onmouseout="this.src='/assets/mouse.png'" alt="mouse">

image_submit_tag:

<%= image_submit_tag "mouse.png", :mouseover => "mouse_over.png" %>

: mouseover :

<input type="image" src="/assets/mouse.png" mouseover="mouse_over.png">

, onmouseover, onmouseout image_submit_tag.

Answer 2

image_submit_tag src.

<input type='submit' src='image.png'></input>

javascript.

$("input.icon").hover(function(){
   $(this).attr("src", 'images/mouse_over.png');
});