Rails: изменение формы отправки изображения при наведении курсора с помощью image_submit_tag

Question

Какой самый элегантный способ «рельсов» для реализации наведения на изображение, которое отправляет форму с хорошими кросс-браузерными функциями?

Для изображения просто отлично работает image_tag:

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

Для image_submit_tag: mouseover не работает.

Один из способов, который я задумал, это использовать файл html.erb с css, но он имеет проблемы с несколькими браузерами:

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

CSS:

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

За пределами рельсов можно использовать javascript или css.Какой самый элегантный способ сделать это в рельсах с 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 и каталог assets при использовании 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');
});