最好的解决方法是不使用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属性之后设置这些坐标。在我的例子中，我猜测20px y坐标差。

使用css更简单更健壮，你必须有一个sprite而不是2个图像：
1º您必须在http://csssprites.com/中创建具有buttonBig.png和buttonBigHover.png的精灵
2º现在，你已经应用一个类到你的链接，像这样：
in your view.html.erb

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

3º http://csssprites.com/将为background-position属性生成值：你必须复制这个值为你的css sth like：
在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。你必须检查什么值对你的精灵是正确的。
问候！

试试这个代码：

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