Rails: Thay đổi hình thức gửi hình ảnh trên di chuột bằng cách sử dụng image_submit_tag

Question

Cách thanh lịch nhất của đường ray để thực hiện di chuột trên hình ảnh gửi biểu mẫu có chức năng trình duyệt chéo tốt là gì?

Đối với chỉ một hình ảnh, IMAGE_TAG hoạt động tốt:

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

Đối image_submit_tag,: mouseover không hoạt động.

Một cách tôi nghĩ là sử dụng các tập tin html.erb với css nhưng nó có vấn đề về trình duyệt chéo:

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

CSS:

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

Bên ngoài đường ray, người ta có thể sử dụng javascript hoặc css. Cách thanh lịch nhất để làm điều này trong đường ray với image_submit_tag là gì?

Answer 1

image_submit_tag tạo thẻ có thuộc tính src.

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

Bạn có thể thay đổi thuộc tính nguồn đó thông qua javascript.

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

Answer 2

Đây là cách đơn giản nhất tôi có thể hình dung ra với image_submit_tag:

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

image_submit_Tag và IMAGE_TAG xử lý: mouseover tùy chọn khác nhau. IMAGE_TAG này:

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

sẽ mất: Tùy chọn mouseover và chuyển đổi này vào:

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

Nhưng image_submit_tag:

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

sẽ lấy: Tùy chọn mouseover như sau:

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

Do đó, y Bạn phải chỉ định onmouseover, onmouseout và thư mục asset một cách rõ ràng khi sử dụng image_submit_tag.