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 とも同じ様子になってました。


トラックバックURL

このエントリーのトラックバックURL:
http://lavidalenta.com/mt/mt-tb.cgi/118