Rails: Change form submit image on hover using image_submit_tag

Question

What's the most elegant 'rails' way to implement a hover on an image which submits a form with good cross browser functionality?

For just an image, image_tag works fine:

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

For image_submit_tag, :mouseover doesn't work.

One way I thought of was to use the html.erb file with css but it has cross 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 of rails, one could use javascript or css. What's the most elegant way to do this in rails with image_submit_tag?

Answer 1

This is the simplest way I could figure out with image_submit_tag:

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

image_submit_Tag and image_tag treat the :mouseover option differently. This image_tag:

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

will take :mouseover option and convert this into:

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

But image_submit_tag:

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

will take the :mouseover option as follows:

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

Therefore, you must specify onmouseover, onmouseout and the assets directory explicitly when using image_submit_tag.