Rails：使用image_submit_tag更改表單提交圖像

Question

在提交具有良好跨瀏覽器功能的表單的圖像上實現懸停，最優雅的'rails'方式是什麼？

對於只是一個形象，IMAGE_TAG正常工作：

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

對於image_submit_tag，：鼠標懸停不起作用。我想到的

一種方法是使用的CSS的html.erb文件，但它具有跨瀏覽器的問題：

<%= 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在rails中執行此操作最優雅的方法是什麼？

Answer 1

image_submit_tag生成一個帶有src屬性的標籤。

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

您可以通過javascript更改該源屬性。

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

Answer 2

這是我能想出用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治療：不同的鼠標懸停選擇。這IMAGE_TAG：

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

將採取：鼠標懸停選項並轉換成這樣：

<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" %> 

將採取：鼠標懸停選項，如下所示：

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

因此，y在使用image_submit_tag時，必須明確指定onmouseover，onmouseout和assets目錄。