透明のボックスにリンクを貼りたい

質問

背景に画像を置き、その上にハイパーリンクの掛かったボックスを重ねて、マウスーオーバーでリンクできるようにしたいです。
下の添付画像のようなイメージです。

アンカータグだとテキストを重ねることになるので、背景の画像を邪魔してしまいダメでした。
その他だとハイパーリンクを貼った透過画像を重ねる方法を思いつきましたが、
できれば高さを一定にした”リスト”などで容易に作れる方法があれば幸いです。

どのような方法がございますでしょうか？

回答No.3

ORUKA1951 · ベストアンサー

＞なぜかIEだけではできませんでした。
原因は、
ul.nav li a{display:block;width100%height:100%;}
は間違い
ul.nav li a{display:block;width:100%height:100%;}
でしたね。
　IEでも問題ないはず。.という接続詞の意味わかってますか？クラスセレクタですから、HTMLで
<div class="side_navi">
<ul>
<li><a href="#"></a></li>
書かれていたら
このリスト内のa要素を指定するには
div.side_navi ul li a{}
です。こうすることでside_naviが他の要素のclass名であっても混乱しない。
接続詞は他にも
半角スペース[ ]
>
+
#
などがある。単独で指定することは少ない(#は単独で使用しても問題ないが、詳細度をあげてプロパティを書き換えるときは、要素やクラス名を書く。

お礼

ご回答ありがとうございました！
再度試してみたら無事に実現することができました。
少しの言語の間違いで動かなくなってしまうため、とても苦労します；

回答No.2

LOHA

CSSでアンカータグにdisplay:blockと適宜width, heightを指定すれば、領域のある空のアンカーを作れるかと思います。
＃といいつつ、試してないので確信は持てないのですが…できるはずです。
透明画像などは要りません。配置はpositionなどを使って指定すればOKです。

他の方法としては、JavaScriptを利用してそれっぽいものを作ることもできます。
＃ただし、ステータスバーにアドレスが出る所謂「リンク」はアンカータグでしか実現できません。

お礼

htmlを以下のようにして

<div class="side_navi">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>

cssを以下のようにしました。

.a ul {
display:block;
position:absolute;
width: 190px;
}
.a li {
display:block;
list-style: none;
border-bottom: 1px solid #FFF;
width:190px;
height:39px;
float:left;
}
.a li a {
display:block;
color: #FFF;
text-decoration:none;
font-weight:bold;
height:39px;
width:190px;
}

IE以外のブラウザでは見れましたが、なぜかIEだけではリンクが有効になりませんでした。
どこに不具合があるのでしょうか？

補足

失礼しました
<div class="a">

としていました。
よろしくお願いいたします。

回答No.1

ORUKA1951

a要素をboxにしてしまえばよろしいです。
<ul class="nav">
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
</ul>
なら、
ul.nav{display:block;}
ul.nav li{display:block;width:200px;height:80px;float:left;}
ul.nav li a{display:block;width100%height:100%;}
とか・・

お礼

ご回答ありがとうございます。
おっしゃったようにして一時成功したのですが、
なぜかIEだけではできませんでした。