診断ツールを作る

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

HTML

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

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も読み込ませて置きましょう。

参考

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

JavaScript

JavaScript

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

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

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

事前にイメージマップを貼る画像を準備しておきましょう。

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

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

ツールの詳しい使い方は、画像を画面内にドラッグ＆ドロップしたあと、画面の下の方に表示されるのでまずは、画像を放り込んでみましょう。

今回はシンプルな矩形なので「矩形を描く」ツールを選択し、画像の「YES」と「NO」の領域を各々囲みます。
囲み終わるとHTMLが生成されます。

コードを取得するときは「RAW」に切り替えるとコピペしやすいです。

↓

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

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

jQueryを利用します。

Responsive Image Maps jQuery Plugin

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

HTML

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

JavaScript

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

全部組み合わせる

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

HTML

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

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

$(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とコードはこちら。

参考記事