敢えてCSSでイメージマップを実現するサンプル
- 1. ファイル
- なんかのファイルですねぇ。
- 2.植物
- なんかの植物ですねぇ。
●用意するもの
・CSS無効の場合のための画像
・CSS有効の場合に使う画像（今回は１枚にしたけど、別に通常用とhover用２枚にしてもＯＫ）
CSSソース
<style type="text/css">
<!--
img.image{display: none;}
dl#imagemap{
margin: 0;
padding: 0;
background: transparent url(xxx.jpg) top left no-repeat;
width: 500px;
height: 374px;
position: relative;
}
dt{margin: 0; padding: 0; position: absolute; font-size: 85%; display: none;}
dd{margin: 0; padding: 0; position: absolute; font-size: 85%;}
dd#files{top: 10px; left: 10px;}
dd#files a{position: absolute; width: 220px; height: 316px; text-decoration: none;}
dd#files a span{display: none;}
dd#files a:hover{position: absolute; background: transparent url(xxx.jpg) -5px -375px no-repeat; top: -10px; left: -5px;}
dd#plant{top: 36px; left: 241px;}
dd#plant a{position: absolute; width: 239px; height: 316px; text-decoration: none;}
dd#plant a span{display: none;}
dd#plant a:hover{position: absolute; background: transparent url(xxx.jpg) -236px -401px no-repeat; top: -10px; left: -5px;}
dd#files a:hover span,dd#plant a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 95%;}
-->
</style>
xhtmlソース
<p><img src="xxx.jpg" alt="サンプル画像" class="image" /></p>
※CSS無効の場合にも画像が表示されるように配慮してる部分（↑）CSS有効の場合はdisplay:none;で非表示に。
<dl id="imagemap">
<dt>1. ファイル</dt>
<dd id="files"><a href="#"><span>なんかのファイルですねぇ。</span></a></dd>
<dt>2.植物</dt>
<dd id="plant"><a href="#"><span>なんかの植物ですねぇ。</span></a></dd>
</dl>
ポイントはまずCSS無効のケースに備えてimgタグで画像を配置。それを一旦CSSのdisplay:none;で消しておく所。こうしておけば万一の時には画像は配置され、dlで並べた項目も表示されるので問題なし。
あと、今回はネタ元サイトと同様にspan内に配置されたテキストもhover時にポップアップで表示されるようにしてみたが、別にその部分はなくてもいい。単にマウスが反応するエリアを指定するだけという用途でも使えると思う。もちろんちょっと工夫したら先日書いたポップアップネタのように、背景に画像を使用することも可能だ。
>>Redline Magazine::CSSで敢えてイメージマップの記事へ
