画像内に好きな形でイメージマップを作って、一部箇所だけに属性やクラスを与えたり、クリック出来るようにしていきます。また、イメージマップをレスポンシブな画像に対応させていきます。
例えば、下記のようなイメージの各パーツの機能説明をしようと思って、それぞれのボタンにクリックイベントやホバーを付けたい時にどうするか。
恥ずかしながらイメージマップなるものを知らかなかった私は最初、divタグやCSSのposition: absoluteを使ってイメージの上に要素を作っていこうと試みましたが、途方もない作業で詰みました。
調べたところイメージマップなるものがあると知り、利用してみたところ簡単だったので、備忘録もかねてQiitaに初投稿してみます。
イメージマップとは？
１つの画像の中に複数の領域を作って、一般的にはその領域にリンク先を指定し、クリックすればリンク先に飛べるようにするものです。リンクの他にも属性やクラスなども設定出来るので、様々な利用方法が可能となります。
上記のイメージでは複雑なので、例として下記のようなシンプルな画像で試してみます。
左が青いボール、右が赤いボールだということをそれぞれボールをクリックした時に示していきますが、ボールはそれぞれ円形なので、イメージマップも円状に作成します。
Image Map Generatorでイメージマップを作成
いくつかイメージマップを作成するサイトがありましたが、今回は下記のImage Map Generatorを利用します。
https://www.image-map.net/
ローカルにあるイメージを読み込む場合は、Select Image from My PCをクリックしてファイルを選択します。
画像内に領域をつくる：Shape
画像が読み込まれたら、まずはShapeを選択します。
Rectで長方形、Circleで円、Polyで三角形以上の多方形を作り、画像内に指定したい領域を作成していきます。
-
Rect: 2点を指定。左上の頂点、右下の頂点と設定して四角形を作ります。 -
Circle: まず円の中心、そして円周のどこか１点を選択。 -
Poly: 順番に頂点を指定していきながら多角形をつくっていく感じです。
リンク先を指定：Link
Linkは<area href ="">内のリンク先を指定しますのでクリック時のリンク先を指定します。普通のHTMLのaタグなどと同じ要領ですが、リンク不要でブランクとした場合もhref =""とコードが生成されてしまうので、その場合は#としておくか後ほどコードから削除すればよいかと思います。
Titleとalt属性の指定：Title
alt属性とtitle属性のどちらにも同じ値が設定されます。尚、titleが設定されると、Chromeなどでイメージ上の指定部分にカーソルが乗った際にタイトルの値が表示されてしまいますので、不要な場合は後ほど削除してもよいかと思います。
ターゲット：Target
リンク先の内容や、フォームの結果をどのようなウィンドウで表示するかを指定します。この辺りは普通のHTMLの内容です。
次の範囲を追加：Add New Area
+Add New Areaで新たな領域を作成し、Activeで選択して再度同じ手順を繰り返します。
コード生成：Show Me the Code
指定したい範囲全てが完了したら、最後にShow Me the Codeをクリックすると下記のようなコードが生成されますので、これをHTML上に書けばイメージマップの完成です。
<img src="balls.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="blueBall" title="blueBall" href="#" coords="57,99,47" shape="circle">
<area target="" alt="redBall" title="redBall" href="#" coords="154,97,44" shape="circle">
</map>
なお、usemap="#image-map"で指定された値と<map name="image-map">でそれぞれが結びいています。
areaにはクラス名を付けることも出来るので、このクラスを元にクリックイベントなどを作れます。また、自分は下記のように使わない属性は削除しました。
<area class="blueBall" alt="blueBall" coords="57,99,47" shape="circle">
jQuery RWD Image Mapsでイメージマップをレスポンシブ化する
画像が拡大縮小した際に、イメージマップの範囲も拡大縮小されるようにする為、jQuery RWD Image Mapsというプラグインを利用します。jQueryを利用している為、jQuery読み込み後にjQuery RWD Image Mapsを読み込んでください。
Github
https://github.com/stowball/jQuery-rwdImageMaps
CDNはこちらから
https://cdnjs.com/libraries/jQuery-rwdImageMaps
実際の記述
$('img[usemap]').rwdImageMaps();
script内の記述はこれだけです。
<img class="balls" src="balls.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="blueBall" title="blueBall" href="#" coords="57,99,47" shape="circle">
<area target="" alt="redBall" title="redBall" href="#" coords="154,97,44" shape="circle">
</map>
imgにクラス名を付けるなどしてCSSでwidthを指定します。
.balls {
width: 100%;
}
heightも指定する場合、元画像に対してwidthとの比率が違うと、イメージマップもズレてくるので注意してください。