イメージマップ(クリッカブルマップ)で作るレスポンシブな診断ツール

イメージマップ（クリッカブルマップ）を用いてクリックorタップで選択していく診断ツールを作ります。

- **要件**
  - 画像にリンクを貼って「Yes/No」みたいな分岐をさせたい
  - レスポンシブもさせたい

そんなシーン向けです。

- **作る手順**
    - 診断ツールを作る
    - イメージマップ（クリッカブルマップ）を設定する
    - レスポンシブ対応する

上記の順に説明します。

# 診断ツールを作る

まず、骨組みとなるYes/Noの分岐をHTMLで作ります。

## HTML

- 質問と答えを設定する
- `<a>`に`class="btn"`を追加
- 各質問を括るdivに`id`を振る

```HTML:HTML
<div class="wrap">
    <div id="q1" class="positionFit">
        <p>【Q1】ケーキは好き？</p>
        <p><a class="btn" href="#q2_1">Yes</a></p>
        <p><a class="btn" href="#q2_2">No</a></p>
    </div>
    <div id="q2_1" style="display: none;">
        <p>【Q2-1】お肉は好き？</p>
        <p><a class="btn" href="#a1">Yes</a></p>
        <p><a class="btn" href="#a2">No</a></p>
    </div>
    <div id="q2_2" style="display: none;">
        <p>【Q2-1】お酒は好き？</p>
        <p><a class="btn" href="#a3">Yes</a></p>
        <p><a class="btn" href="#a4">No</a></p>
    </div>
    <div id="a1" style="display: none;">
        <p>ケーキとお肉</p>
    </div>
    <div id="a2" style="display: none;">
        <p>ケーキ</p>
    </div>
    <div id="a3" style="display: none;">
        <p>お酒</p>
    </div>
    <div id="a4" style="display: none;">
        <p>どれもあてはまらない</p>
    </div>
</div>

```


jQueryも読み込ませて置きましょう。

```HTML:参考
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
```

## JavaScript

```JavaScript:JavaScript
$(function () {
    $(".btn").on("click", function () {
        $(this).closest("div").css("display", "none");
        id = $(this).attr("href");
        $(id).addClass("positionFit").show("fast");
    });
});
```

ここまででざっくり骨組みが出来ました。

# イメージマップ（クリッカブルマップ）を作成する

事前にイメージマップを貼る画像を準備しておきましょう。
![95ffb021-530d-cc43-9e28-a46e0431af18.png](https://qiita-image-store.s3.amazonaws.com/0/54478/4238e36f-ca49-019c-891f-0700171c0efc.png)


ツールを利用して、イメージマップを作成します。

**HTML Imagemap Generator**
http://labs.d-s-b.jp/ImagemapGenerator/


ツールの詳しい使い方は、画像を画面内にドラッグ＆ドロップしたあと、画面の下の方に表示されるのでまずは、画像を放り込んでみましょう。
<img width="919" alt="069372de-a031-a090-793b-b22a076a8506.png" src="https://qiita-image-store.s3.amazonaws.com/0/54478/bfdd11a4-307d-d8d9-b4fd-38a6a7eedfba.png">


今回はシンプルな矩形なので「矩形を描く」ツールを選択し、画像の「YES」と「NO」の領域を各々囲みます。
囲み終わるとHTMLが生成されます。
<img width="552" alt="eaab0c29-4ec0-1347-6359-6d1f2beb8bee.png" src="https://qiita-image-store.s3.amazonaws.com/0/54478/237f0f14-ae0a-e549-fc4f-5ad854181031.png">


コードを取得するときは「RAW」に切り替えるとコピペしやすいです。
<img width="460" alt="51888833-8b4c-0049-4e34-87f7a4e39b14.png" src="https://qiita-image-store.s3.amazonaws.com/0/54478/50f6f376-1fe9-da88-27e9-0e1722cdcfd2.png">
↓
<img width="457" alt="414854b9-a83b-8348-8e94-e2fc98d6014b.png" src="https://qiita-image-store.s3.amazonaws.com/0/54478/b1190c06-5725-044a-a203-7f1244a48ab7.png">


必要な分コードを取得します。
（今回は超シンプルなので、コードを使いまわしていきます。多少のズレはご愛嬌ということで）

# イメージマップをレスポンシブにする

jQueryを利用します。

- [Responsive Image Maps jQuery Plugin](https://github.com/stowball/jQuery-rwdImageMaps)

単体で利用する場合のサンプルコードはこんな感じです。

```HTML:HTML
<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>
```

```JavaScript:JavaScript
$(function(){
  $('img[usemap]').rwdImageMaps();
});
```

# 全部組み合わせる

元となるHTMLとイメージマップ、レスポンシブ化するjQueryの３つを組み合わせます。

## HTML

- イメージマップを設定した`<img>`には`width`（画像のオリジナルサイズ）を設定することでレスポンシブを反映できます
- `usemap`と`  <map name="">`には同じidを記述します
    - 他の質問項目とidが重複しないようにします
- `<area>`に`class="btn"`とリンク先`href=""`の設定をします

```HTML:HTML
    <div id="q1" class="positionFit">
            <img src="http://jsrun.it/assets/C/b/r/4/Cbr4w.png" usemap="#ImageMap-q1" alt="【Q1】ケーキは好き？" width="500">
            <map name="ImageMap-q1">
                <area shape="rect" coords="1,2,250,301"  class="btn" href="#q2_1" alt="Yes">
                <area shape="rect" coords="250,1,646,341"  class="btn" href="#q2_2" alt="No">
            </map>
    </div>
```

## CSS
特に何もしていないので省略。


## JavaScript

- YES/NOの分岐（クリック）後にレスポンシブ化の処理を入れています

```JavaScript:JavaScript
$(function(){
    $(".btn").on("click", function() {
        $(this).closest("div").css("display","none");
        id = $(this).attr("href");
        $(id).addClass("positionFit").show("fast");

        setTimeout(function(){
            $('img[usemap]').rwdImageMaps();
        },500);
    });
});
```

以上で完成です。
[DEMOとコードはこちら](http://jsdo.it/m-nakamura/8LFp)。
![a1d196c5-e836-9b8c-7331-f09583981b1b.png](https://qiita-image-store.s3.amazonaws.com/0/54478/3af85138-90bd-d2e6-2b27-56ab625f958a.png)

# 参考記事

- [イメージマップ（クリッカブルマップ）の作り方とまとめ](http://www.radia.jp/how-to-imagemap/)
- [レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」](http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/)