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;
}

ここで、ボタンに同じ画像を使用していることに注意してください。その理由は、ブラウザが 1 つの画像のみをロードする必要があるためです。そして、状態の違いは、その画像の背景位置の違いです。したがって、ボタンをスライスして、両方の状態を 1 つの画像で使用できるようにします。次に、ピクセルの違いを測定し、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 sth のようにコピーする必要があります:

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、background-position が であることがわかります0 50px。スプライトの正しい値を確認する必要があります。

よろしく！

于 2012-06-17T17:12:15.273 に答える