1

我有一个作为图像创建的按钮。此按钮有一个鼠标悬停，可以切换到另一个图像。基本的 Javascript。我需要 Rails 链接中的图像。有没有办法让我在 rails 链接中添加 Javascript 事件？

这是我的工作：

<%= link_to image_tag("../assets/images/buttonBig.png", :border=>0), :action => 
'signup', :controller => 'prelogin' %>

这就是我想要的：

<%= link_to image_tag("../assets/images/buttonBig.png"
onmouseover="src='../assets/images/buttonBigHover.png'" 
onmouseout="src='../assets/images/buttonBig.png'", :border=>0), :action => 
'signup', :controller => 'prelogin' %>
4

2 回答 2

0

好吧，最好不使用 Rails 来解决这个问题。你应该在这里严格地保留 CSS，如下所示：

<%= link_to image_tag("../assets/images/buttonBig.png"), :action => 'signup', :controller => 'prelogin', :class => "button-class" %>

用 CSS 编写其余部分：

.button-class {
  border: 0;
  background: url('../assets/images/button.png') no-repeat 0 0px;
}
.button-class:hover {
   background: url('../assets/images/button.png') no-repeat 0 20px;
}

现在请注意我如何在此处为您的按钮使用相同的图像。原因是您的浏览器只需加载一张图片。状态的差异是该图像的背景位置的差异。因此，您可以对按钮进行切片，以便在一张图像中同时使用两种状态。no-repeat然后测量像素差异并在我上面写的属性之后设置这些坐标。在我的示例中，我猜测20pxy 坐标差异。

于 2012-06-17T17:11:55.023 回答
0

使用 css 它更简单、更健壮，你必须有一个精灵而不是 2 个图像：

1º 您必须在http://csssprites.com/buttonBig.png中创建一个精灵buttonBigHover.png

2º现在你已经为你的链接应用了一个类，比如：

在你的 view.html.erb

<%= link_to image_tag("buttonBig.png", :border=>0), :action => 
'signup', :controller => 'prelogin', :class => "button" %>

3º http://csssprites.com/将为background-position属性生成一个值：您必须为您的 css 复制此值，例如：

在您的 prelogin.scss 文件中：

a.button {
       background: url("buttonBig.png") no-repeat scroll 0 0 transparent;
          }

a.button:hover {
           background: url("buttonBig.png") no-repeat scroll 0 50px transparent;
              }

在a.button:hover您可以观察到背景位置是0 50px。您必须检查您的精灵的正确值。

问候！

于 2012-06-17T17:12:15.273 回答