Rails：image_submit_tagを使用して、ホバーでフォーム送信画像を変更する

Question

クロスブラウザ機能を備えたフォームを送信する画像にホバーを実装する最もエレガントな「レール」方法は何ですか？ちょうど画像の場合

、IMAGE_TAGが正常に動作します：image_submit_tagについては

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

、：マウスオーバーでは動作しません。

私が考える一つの方法は、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を使ってこれを行う最もエレガントな方法は何ですか？

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 o image_submit_tagを使用するときは、onmouseover、onmouseout、assetsディレクトリを明示的に指定する必要があります。