クリッカブルマップ上のポップアップ画像

質問

初心者です。よろしくお願いします。

クリッカブルマップ上にあるリンク先にポインタを合わせると、ポップアップ画像が表示される仕組みを作りたいと思います。
いろいろなサイトで調べるうちに、テキストにポインタを合わせた時にポップアップ画像が表示されるコードを見つけたので、そのコードを自分なりに作り変えて試してみたのですが、うまく表示されません。

現在のhtmlコード、およびcssのコードは下記のとおりです。

<ul>
<img src="img/top_map.jpg" alt="テスト画像" width="880" height="720" border="0" usemap="#Map" />
<map name="Map"><span class="test"><area shape="rect" coords="363,70,379,86" href="リンク先URL" target="_blank" />
</span>
</map>
</ul>

ul area { position: relative; }

ul area span {
display: block;
visibility: hidden;
width: 150px;
height: 150px;
position: absolute;
top: -100px;
left: 50px;
}

ul area:hover { background: #FFFFFF; }

ul area:hover span {
visibility: visible;
text-indent: -10000px;
}

span.yahoo { background: url(ポップアップ画像URL); }

他のサイトで、areaにはhoverという記述ができないという書き込みもありましたが、何とか実現できないものかと思っています。

どなたか、教えていただけないでしょうか？

回答No.1

font_color

上記のソースでは無理ですね。

仮に<areal>に:hoverが出来たとしても
<areal>を囲んだ<span>自体をvisibility: hidden;としていては
:hover出来ません。
なぜ<ul>が使われているのかも分かりません。
お望みの動作を実現することは可能ですが、
あまりにもでたらめなソースなので、修正しようがありません。

CSS、HTMLの基本を勉強されてから新たに作成したほうが早いかと思います。

お礼

お手を煩わせてしまって申し訳ありません。。。
なにぶん、初心者なのでご容赦ください(^^;)