Rails: modulo di modifica invia immagine al passaggio del mouse usando image_submit_tag

Question

Qual è il modo più elegante di "rotaia" per implementare un passaggio del mouse su un'immagine che invia un modulo con una buona funzionalità del browser incrociato?

Per solo un'immagine, image_tag funziona bene:

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

Per image_submit_tag,: passaggio del mouse non funziona.

Un modo ho pensato è stato quello di utilizzare il file html.erb con i CSS ma ha problemi di cross browser:

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

CSS:

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

Al di fuori di rotaie, si potrebbe utilizzare JavaScript o css. Qual è il modo più elegante per farlo in rail con image_submit_tag?

Answer 1

image_submit_tag genera un tag con un attributo src.

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

È possibile modificare l'attributo di origine tramite javascript.

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

Answer 2

Questo è il modo più semplice riuscivo a capire con image_submit_tag:

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

image_submit_Tag e image_tag trattare l'opzione: passaggio del mouse in modo diverso. Questo image_tag:

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

avrà: opzione di passaggio del mouse e convertire questo in:

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

Ma image_submit_tag:

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

avrà l'opzione: passaggio del mouse come segue:

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

Pertanto, y è necessario specificare onmouseover, onmouseout e la directory assets esplicitamente quando si usa image_submit_tag.