CSS: リンク
背景画像にリンクをつけたいと思った。
ホームページ作成時のこと、ヘッダー部分(一番上のホームページの表札部分)に
テキストを入れずに画像をCSSで配置してそこにトップページのリンクを張りたい、
ということで。
そんなことが実際できるのかはホントの事はわからんが、検索途中でちょうど良い
物件を見つけたので拝借。
・・・CSS・・・・・・・・・・・・・・・・・・
#header {
background-image: url(img.gif);
background-color:#fff;
width: 800px;
height: 120px;
display: block;
}
・・・・・・・・・・・・・・・・・・・・・・・・・・
background-color: #fff:
を入れたのは、画像が"gif"で背景色を指定せずに透明だったから。
バックが基本白だからいいようなものの、そうでない場合は背景色が初めからある画像が必要かいな。
見つけた例では下記のように "a.test"とリンク "a" classセレクタ になっていたけど、もともと "#header" として idセレクタを書いていたので単純に内容だけを埋め込んでみた。ら一応OKでした。
a.test {
display: block;
width: 800px;
height: 120px;
background-image: url('test.gif');
}
・・・HTML・・・・・・・・・・・・・・・・・
<a href="hoge.html" id="header"><br></a>
・・・・・・・・・・・・・・・・・・・・・・・・・・
<body> の直後にこのHTMLを書いたら、思い通り、画像全体にリンクが張られているような感じに仕上がった。
一応、Firefox 3.0, IE8, Google crom, Safari とも同じ様子になってました。

