Home > Javascript > クリッカブルマップ（イメージマップ）にプルダウンメニューを付ける

クリッカブルマップ（イメージマップ）にプルダウンメニューを付ける

公開日: 2016/11/28

最終更新日: 2020/4/8

クリッカブルマップ（イメージマップ）にプルダウンメニューを付けるという事をやった時に普通に位置情報を取得すると、マップの左上になっちゃうんで、どうやるん？ってなったんで、その覚え書きです。
この先使う事はないでしょうが、覚え書きです。しかしクリッカブルマップて使う事なくなりましたね

どうゆう事？なのでサンプル

以下にデモを用意してます。
クリッカブルマップのリンク部分にホバーするとツルッと出てくるやつです。
いや、ヌメッと出てくる。いや、シュパッと出てくるやつです。

ぽぽぽ
ぱぱぱ
ぽむぽむ

ぼぼぼ
ばばば
ぼむぼむ

とりあえずコード

HTML

    <div id="maparea">
        <map name="imagemap">
            <area shape="rect" coords="450,178,758,384" href="#whatisthis" id="push01">
            <area shape="rect" coords="118,218,355,384" href="#cake" id="push02">
        </map>

        <img src="imagemap.png" usemap="#imagemap">

        <ul id="menu01" class="cpmenu">
            <li>ぽぽぽ</li>
            <li>ぱぱぱ</li>
            <li>ぽむぽむ</li>
        </ul>
        <ul id="menu02" class="cpmenu">
            <li>ぼぼぼ</li>
            <li>ばばば</li>
            <li>ぼむぼむ</li>
        </ul>

    </div>

</map>

</ul>

</ul>

</div>

CSS

#maparea {
            position: relative;
        }
        
.cpmenu {
            display: none;
            background: #fff;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
.cpmenu li {
            padding: 0.5em 0;
            text-indent: 0.5em;
            border-bottom: 1px dotted #ccc;
        }

#maparea {

position: relative;

}

.cpmenu {

display: none;

background: #fff;

margin: 0;

padding: 0;

list-style: none;

}

.cpmenu li {

padding: 0.5em 0;

text-indent: 0.5em;

border-bottom: 1px dotted #ccc;

}

Javascript(jQuery)

        $('area').on('mouseenter', function() {
            var pushId = (this.id);
            var IdNo = pushId.slice(-2);
            menuId = '#menu' + IdNo;
            var Zahyou1 = $(this).attr('coords');
            var Zahyou2 = Zahyou1.split(',');
            var Zahyou3 = parseInt(Zahyou2[0]);
            var Zahyou4 = parseInt(Zahyou2[1]);
            var Zahyou5 = parseInt(Zahyou2[2]);
            var Zahyou6 = parseInt(Zahyou2[3]);
            var menuWidth = Zahyou5 - Zahyou3 + 'px';
            var LeftPosi = Zahyou3 + 'px';
            var topPosi = Zahyou6 + 'px';
            $(menuId).css({
                'position': 'absolute',
                'left': LeftPosi,
                'top': topPosi,
                'width': menuWidth
            }).slideDown(100);
        });

        $('.cpmenu').on('mouseover', function() {
            $(menuId).show();
        });

        $('area, .cpmenu').mouseout(function() {
            $('.cpmenu').hide();
        });

$('area').on('mouseenter', function() {

var pushId = (this.id);

var IdNo = pushId.slice(-2);

menuId = '#menu' + IdNo;

var Zahyou1 = $(this).attr('coords');

var Zahyou2 = Zahyou1.split(',');

var Zahyou3 = parseInt(Zahyou2[0]);

var Zahyou4 = parseInt(Zahyou2[1]);

var Zahyou5 = parseInt(Zahyou2[2]);

var Zahyou6 = parseInt(Zahyou2[3]);

var menuWidth = Zahyou5 - Zahyou3 + 'px';

var LeftPosi = Zahyou3 + 'px';

var topPosi = Zahyou6 + 'px';

$(menuId).css({

'position': 'absolute',

'left': LeftPosi,

'top': topPosi,

'width': menuWidth

}).slideDown(100);

});

$('.cpmenu').on('mouseover', function() {

$(menuId).show();

});

$('area, .cpmenu').mouseout(function() {

$('.cpmenu').hide();

});

解説

HTMLとCSS部分

ツルッと出てくる部分が子要素じゃないので、仕方なく<map>部分にposision:relativeを付けて基準点にする為に、まるっと<div id=”maparea”>で囲っています。んでcssで#mapareaにposision:relativeをかけてます。
それとホバー部分とメニュー部分を合わす為に<area>にpush01・<ul>にmenu01と後2桁の数字を合わせてます。

jQuery部分

var pushId = (this.id);
var IdNo = pushId.slice(-2);
menuId = '#menu' + IdNo;

var pushId = (this.id);

var IdNo = pushId.slice(-2);

menuId = '#menu' + IdNo;

☝の３行で<area>部分のIDを取ってきて、後２桁をスライスして、#menuの後に付けたのを変数menuIdに代入しておいて、hoverした要素と出てくる要素を合わせてます。
もっと上手いことする方法があった気もしますが、まあよしとします。

<area>タグのcoordsから位置情報を取得する。

ここが言いたかったんです。
（rectだけです。四角形です。はい。）
<area>タグのcoords=”**,**,**,**”がマップ内の位置を指定するやつです。
coords=”①左上の横,②左上の高さ,③右下の横,④右下の高さ”となっています。
なので、
<area>に入った(mouseenter)時に、

var Zahyou1 = $(this).attr('coords');

1	var Zahyou1 = $(this).attr('coords');

☝で変数Zahyou1にcoordsを入れて

var Zahyou2 = Zahyou1.split(',');

1	var Zahyou2 = Zahyou1.split(',');

☝で(,☜コロン)で分割して配列に。
んでZahyou3～6にそれぞれを入れてます。
あとはposition:absolute;を付けて、topとleftに入れてやってるだけです。

ちなみに、hoverで良さそうと思ったのですが、ulが子要素じゃないので、プルダウン部分にカーソルをやっちゃうと閉じちゃうんですよね。バカ！
要するに、
うん。。。。だよね。。。
ってなっちゃうので、
<area>にmouseenterで出して、<area>か<ul class=”cpmenu”>からのmouseoutで消してます。
んで、<ul class=”cpmenu”>に行ったときに消えない様に<ul class=”cpmenu”>にmouseoverでshowしてます。
意味分かんないよコノ野郎なんですけど、まあこうしときゃいいようなんで、こうしといてもらえるとうれしいです。はい。