イメージマップの出力には、Illustlator を利用する。
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を利用して描画するため、他の処理を同時にさせると反応が結構重くなる。