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

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

公開日:

最終更新日:

クリッカブルマッププルダウンイメージ


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

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

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

とりあえずコード

HTML

CSS

Javascript(jQuery)

解説

HTMLとCSS部分

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

jQuery部分

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

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

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

☝で変数Zahyou1にcoordsを入れて

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

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

Comment

よろしければコメントをどうぞ