CSS Spriteでイメージマップ
CSS Sprite を利用して Image Map を作ってみる
-
上記のような1枚の画像を用意し表示領域を css で指定する、画像の下の部分は不要な部分は透過にしておく
#japanmap { list-style: none; background: url(image/map.png) no-repeat 0 0; position: relative; width: 545px; height: 305px; margin: 0 auto; padding: 0; }
-
各エリアの位置とサイズを css で指定する(茶)
#hokkaidou { width: 104px; height: 73px; top: 20px; left: 395px; }
-
onMouse時の画像を css で指定する位置のみでよい(緑)
#japanmap #hokkaidou a:hover { background-position: -395px -325px; }
-
すべてのエリアを指定しベースとなるタグを作成する
<ul id="japanmap"> <li id="hokkaidou"><a href="javascript:void(0);"> </a></li> <li id="touhoku"><a href="javascript:void(0);"> </a></li> <li id="kantou"><a href="javascript:void(0);"> </a></li> <li id="hokuriku"><a href="javascript:void(0);"> </a></li> <li id="toukai"><a href="javascript:void(0);"> </a></li> <li id="kansai"><a href="javascript:void(0);"> </a></li> <li id="chugoku"><a href="javascript:void(0);"> </a></li> <li id="shikoku"><a href="javascript:void(0);"> </a></li> <li id="kyushu"><a href="javascript:void(0);"> </a></li> </ul>