[CSS]画像リンクの設定方法

JSを使わずにCSSで画像リンクをつくることはたくさんありますが、オンマウス時の指定はいろいろあると思います。
自分がよく使うのは、オフマウス時とオンマウス時の画像をつなげて１つの画像にし、a要素の背景画像の設定をして、a要素の高さを 0 にして、代わりにpaddingを上方向に指定するやり方をしてます。

■HTML

<a id="link01" href="#">ここのテキストはCSSの指定で隠れます</a>

■CSS

a#link01 {
display: block;
overflow: hidden;
width: 100px;
height: 0 !important;
height /**/:33px;
padding-top: 33px;
background-image: url(/images/link.gif);
}

/*オフマウス時*/
a#link01 { background-position:? 0???? 0; }

/*オンマウス時*/
a#link01:hover { background-position:? 0???? -33px; }

上の例では高さ33pxの画像を上下につなげて、合計の高さ66pxの一つの画像になり、それをCSSのa要素の指定で、高さを0にし、padding-top: 33pxで、overflow: hidden;にすることであふれる高さを表示しないようになってます。

そして、オンマウス時は、背景画像の開始位置を上にずらすことにより、オンマウス画像が表示されます。

テキストリンクとしてHTMLには記述してあるので、SEO的にもいいんじゃないかと思います。グローバルナビとして、すべてのナビ画像を一枚画像にして設定する方法もあります。
詳しくは、速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)のChapter.5を参考にするといいかなと思います。この本は、自分的にもCSS習得の良本だと思います。

これからCSSを学ぶ方はチェックしてみてはいかがでしょうか？

また、[to-R]さんで書かれてあった

CSSで実現するスマートなロールオーバー

もいい方法だなーと思います。普通にHTMLにオフマウス時の<img>タグがあり、その背景にCSSでオンマウス時の画像を設定する方法。

自分は用途によって使い分けます。

■スタイルシート（CSS）の参考書です。CSS関連書籍 一覧はこちら

Popularity: 28% [?]