Illustratorでの操作

パスを書く。グループ化している場合は解除しておく。
メニューの「ウィンドウ」から「属性」ウィンドウを表示させる。
パスを選択し、属性ウィンドウの「イメージマップ」の項目を「多角形」に変更する。
URL欄に「#areaname」など任意の名前を設定する（あとで手がかりになる項目なので、わかりやすい名前をつける）
「ファイル」→「Web用に保存」を選択し、「プレビュー」ボタンを押す。
イメージマップのソースコードが出力されるので、エディタにコピペする。

エディタでの設定

設定が正しく行われていれば、このような形式で出力される。

イメージマップのソース

<img src="image_map.png" width="400" height="200" alt="" usemap="#_Map">
<map name ="_Map">
<area shape="poly" alt="" coords="10,20, 30,40" href="#areaname">
</map>

imgタグのusemap属性とmapタグのname属性が対応関係にある。
ここを任意の名前に書き換える。
Illustratorの仮設定のままで使うのは微妙なので。

usemap属性が「#名前」の形式なのに対して、name属性は#なしの名前だけという点に注意。
ここを正しく記述しないと、関連付けがされない。

名前書き換え後

<img src="image_map.png" width="400" height="200" alt="" usemap="#japanMap">
<map name ="japanMap">
<area shape="poly" alt="" coords="10,20, 30,40" href="#areaname">
</map>

ここまでできれば、画像内の任意の領域がクリック可能になる。
あとは、各エリアにclassを振ったり、altを設定したり、data属性を加えたりして、JS等で具体的な処理をさせていく。

画像のロールオーバー

画像のクリック時・ホバー時に表示画像を切り替えさせるためには、
JSを使う必要がある。

<img src="image_map.png" width="400" height="200" alt="" usemap="#japanMap">

src属性の書き換え

クリック・ホバー時にsrc 属性を書き換えて、別パターンの画像を表示させる形式でやると、WindowsのChromeで何度も実行させていると、途中でレンダリングが止まった。

src属性の書き換えは行われているが、画面への反映が行われない状態。
なので、src属性の書き換えで切り替えない方が良い。

class の書き換え

classの付け替えを利用して、CSSの背景画像を切り替える方式でやると上記の問題は起こらない。
が、そもそも画像にCSS背景を設定しても、画像の領域部分は画像表示が優先されて背景が表示されない。
なので、「同じ大きさの透明な画像にイメージマップを設定し、CSSで背景画像を表示させ（本来イメージマップで使用する画像）、それをイベントで切り替える」というパターンにする必要がある。

コードにすると以下の様な構造になる。

サンプル

<div class="base"> <!-- ベースの背景画像 -->
    <div class="switch"> <!-- JSでクラスを追加・削除してCSS背景を切り替える箇所 -->
        <img src="image_map.png" width="400" height="200" alt="" usemap="#japanMap"> <!-- 透明な画像を設定 -->
        <map name ="japanMap">
            <area shape="poly" alt="" coords="10,20, 30,40" href="#areaname">
        </map>
    </div>
</div>

ImageMapster

書きだしたイメージマップは、 jQuery プラグイン ImageMapster でロールオーバーを変化させることが手軽にできる。
jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる

※IE8非対応　モックとして使う分には有用。
Canvasを利用して描画するため、他の処理を同時にさせると反応が結構重くなる。