1

目標: 誰かが私のウェブサイトのロゴをクリックすると、イメージをより強い内部シャドウを持つ別のイメージまたは数ピクセルの上部パディングを持つイメージに変更することで、「プッシュ」されているように見えます。

私はここでボードを読んでいて、これを機能させるためにチュートリアルを次々と試していますが、まだ問題があります. 私が今いるところは、非常に単純なコードに戻っています...余分なCSSはありません...JavaScriptはありませんが、おそらくそれらの1つまたは両方を使用する必要があることがわかりました。現在 (非常に基本的な html で、CSS や JS は使用していません)、ロゴをクリックすると 2 番目の画像が表示されますが、最初の画像の後ろに表示されます。最初の画像は消えず、クリックしたときにその背後でテスト画像が光っていることしかわかりません（おそらく「背景画像」を使用しているためですが、何らかの変化を見ることができた唯一の方法です） ）。

<div class="logo"><a href="index.html"><img src="images/logo.png" onmousedown="this.style.cssText='background-image:  url(images/logo-click.png)'" onmouseup="this.style.cssText='background-image:  url(images/logo.png)'" /></a></div>

CSS は処理できますが、JS に関する知識は限られているため、JS を使用する必要がある場合は、テンプレートまたはチュートリアルを教えてください。CSS でこの効果をゼロから作成する方法についてのチュートリアルをたくさん見つけましたが、ロゴは画像であるため作成できません。

1 つのメイン画像を表示し、それをクリックして別の画像を表示し、クリックを離して元の画像を表示するのは簡単なようです。それでも...私はこれに苦労しています。

4

1 に答える 1

0

マウスがクリックされたときだけ変更を取得したい場合は、CSS の :active 要素を使用できます。
次のコードはテストしていませんが、動作するはずです。

a {
    background-image:  url(images/logo.png)
}

a:active {
    background-image:  url(images/click.png)
}
于 2012-11-14T03:13:51.793 に答える