クリッカブルマップにツールチップを実装したい

質問

<a　class="tooltip"><span>ツールチップ</span></a>
a.tooltip span　{
display: none;
}
a.tooltip:hover span　{
display: block;
}
上記のようにしてcssだけでツールチップを実装しています。

これを応用して、クリッカブルマップにツールチップを実装したいのですが
<map>
<area shape="rect" coords=",,,"/>
</map>
このようにタグが<a>の場合と異なっており、どのように記述すればよいのかわかりません。

やり方を教えてほしいです。
どうぞよろしくお願いします。

回答No.1

noris02 · ベストアンサー

area には hover をかけることができないので、
画像の上に レイヤーのように 擬似空間を作り、そこに a で指定してあげる方法が
よいと思います。

擬似空間の作り方は、透明gifを 乗せる等です。

.parent{position:relative;top:0;}
.child{position:absolute;top: --;left: --;}
a.tooltip span{display:none;}
a.tooltip:hover span{display:block;}

<div class="parent">
<img src="" alt="この画像はbackgroundにしてもいいかもしれません">
<div class="child"><a class="tooltip" href=""><img src="透明.gif" alt=""><span>aaa</span></a></div>
</div>

また jquery を使うという 方法もあるとおもいます。
その場合はarea でも いけるとおもいます。コード書き換えは発生すると思いますが。

お礼

ありがとうございます。
titleで標準のツールチップ表示にすることにしました。
やはりjsでの対応も考えています。