CSS Spriteでイメージマップ

CSS Sprite を利用して Image Map を作ってみる

1. 上記のような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;
   }

2. 各エリアの位置とサイズを css で指定する（茶）

   #hokkaidou {
     width: 104px;
     height: 73px;
     top: 20px;
     left: 395px;
   }

3. onMouse時の画像を css で指定する位置のみでよい（緑）

   #japanmap #hokkaidou a:hover {
     background-position: -395px -325px;
   }

4. すべてのエリアを指定しベースとなるタグを作成する

   <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>