swapImage {src：'image2.jpg'}在Rails 3.1中沒有響應

Question

我正在將我的Rails應用程序從2.3升級到3.2，但目前我被困在3.1中。

我目前正在努力將對圖像文件名的引用轉換爲適用於資產管道的語法。我需要幫助解決這個問題的主要地方是使用按鈕翻轉swapImage語句。這裏有一個例子：

<%= image_submit_tag "signin.jpg", {:class => "swapImage { src: '#{image_path('signinHover.jpg')}' }" %> 

這個工作在開發中。但是，當我將這些代碼部署到生產環境中時，翻轉仍然無效。根本沒有明顯的翻滾響應。

<input class="swapImage {src: &#x27;/assets/signinHover.jpg&#x27;}" src="/assets/signin.jpg" type="image" /> 

我猜這可能是我的問題的一部分：此外，當我查看源代碼的單引號仍然出現逃脫。

我也想知道如果也許我不使用資產管道正確加載我的javascript/jquery資產。但是當我檢查https://staging.genlighten.com/assets/application.js時，我看到swapImage代碼顯示得很好。

我很感謝關於如何在Rails 3.1中正確實現swapImage的建議，以及資產管道提供的圖像的正確語法。或者，有沒有更好的方法來滾動按鈕圖像，我應該使用呢？

非常感謝，

院長理查森 Genlighten.com

Answer 1

幾件事情需要固定在這裏。 首先，你在輸入標籤上有一個src屬性。這兩件事不混合。 你需要用CSS來設計你的輸入樣式，或者在某處放置一個圖像元素來完成這項工作。

既然你正在尋找一個懸停的圖像切換效果，我會建議使用CSS sprites。一旦鼠標懸停在目標上，加載圖像將會破壞用戶體驗，因爲直到瀏覽器加載內容爲止，您的按鈕將會完全消失。

退房一個千萬bajillion CSS精靈的一個教程在那裏，像這樣的（第一個我在goog找到）：

http://css-tricks.com/css-sprites/

現在。如果你在把一個備用電源在標籤本身和裝載上懸停設置，我建議你把它放在一個數據屬性：

<img class="swapImage" data-image-swap="{src: &#x27;/assets/signinHover.jpg&#x27;}" src="/assets/signin.jpg" /> 

注意這是一個圖像標籤，而不是輸入。您必須在某處添加輸入：/

您可以發佈您希望輸出的代碼嗎？另外，包含swapImage（）方法會很好，所以我們可以看一下。

再次，使用JavaScript來使懸停效果發生是不良做法。我極力推薦你用精靈去。

高度。 :)