0

私は現在、この現在のHTMLマークアップをJavascriptで使用して、テキストホバーで「ロールオーバー」するインライン画像を含むテキストリンクを作成しています。

<div><a id="link" href="page.html"
        onmouseover="rollover(this.id,'over');"
        onmouseout="rollover(this.id,'out')"
     >Link</a><img id="linkButton" src="image.gif" /></div>

さまざまな長さのテキストで新しいテキストリンクを簡単に作成できるように、画像がインラインであることが重要です。

Javascriptを使用せずに、ロールオーバーのオーバー状態とアウト状態を含む単一の画像を使用してこれを実行したいので、おそらく背景位置のトリックを使用します。

4

1 に答える 1

0

CSS でbackground-image(または単に)を使用する必要があります。backgroundここに例があります http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

重要なのは、リンク要素で疑似クラスを使用することです。例えば：

a:hover
a:active
a:visited

が完全にブロック要素にならないinline-blockように使用することもできます。a幅と高さを設定したい場合があります。display:inline-blockそれでもサポートする必要がある場合は、IE7 ではそれほどうまく機能しないことに注意してください。

CSS スプライトの使用に関するその他のヒントを次に示します。

于 2013-01-05T00:10:30.053 に答える