0

我正在将我的 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 的建议，并为资产管道提供的图像提供正确的语法。或者，是否有更好的方法来替代我应该使用的翻转按钮图像？

非常感谢，

Dean Richardson Genlighten.com

4

1 回答 1

0

有几件事需要在这里解决。首先，您在输入标签上有一个 src 属性。这两件事不能混为一谈。您需要使用 CSS 为您的输入设置样式，或者在某处放置一个图像元素以使其正常工作。

由于您希望获得悬停图像切换效果，我建议使用 CSS sprites。一旦鼠标悬停在目标上就加载图像会破坏用户体验，因为在浏览器设法加载内容之前，您的按钮将完全消失。

查看一千万个 bajillion css sprites 教程中的一个，比如这个（我在 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 使悬停效果发生是不好的做法。我强烈建议您使用精灵。

高度。:)

于 2013-08-31T22:38:03.703 回答