KANGAROOPAW.NET

CSS を使って画像にリンクをつける

ほとんど自分用メモ。
img タグを使わずにテキストにリンクを貼り、それを CSS で画像にリンクが貼られているように見せかけるもの。
用例としてタイトル画像にホームへのリンクを貼るものとして書く。

<div id="head">
<h1 id="#lh"><a href="http://siteurl"><span>sitetitle</span></a></h1>
</div>

h1 を div で囲み、テキストを span で囲む。 h1 に id をつける。

#lh{
background:url('/background-img.gif') no-repeat;
width:750px;
height:50px;
}

h1#id に以上を適用。

#head span{
display:none;
}

span で囲まれたテキストを消す。

h1 a{
display:block;
width:750px;
height:50px;
}

h1 へのリンク全体へ以上を適用。
高さと幅、ブロック要素を加える。
a:hover 時に変化を与えたいのならそれも追記する。

【参照】
Visual formatting model
display－スタイルシートリファレンス
Dynamic HTML Styling : Calssification Property Display