あらすじ
画像に色々埋め込みたくなったので、イメージマップ使ってみました。
インデックス
目指すもの
今回使う画像はこちら。
この美味しそうな水炊き鍋の「鳥肉」と「豆腐」にホバーしたら文字が表示されるようにします。
イメージマップを作る
領域を指定する
この作業が一番大事かつ一番めんどいです！
簡単にやる方法求む。
今回は HTML Imagemap Generator を使いました。
https://labs.d-s-b.jp/ImagemapGenerator/
右上で描きたい図形をクリックして、それとなく領域を指定します。
すると、 coord 要素が算出されます。
レスポンシブデザインに対応する
レスポンシブデザインのページの場合、イメージマップがズレます。
( 試しに width: 50vw; とか指定してみると分かります。 )
ので、再計算してくれるプラグイン ( jQuery-rwdImageMaps ) を利用します。
https://github.com/stowball/jQuery-rwdImageMaps
README に従ってスクリプトを追加します。
ホバーしたら文字を出す
area 要素をホバーしたら div に入った title が表示されるようにしました。
こんな感じの index.html になりました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Clickable Map</title>
</head>
<body>
<img
src="img/food_nabe_mizutaki.png"
usemap="#img3"
alt="水炊き"
id="img3"
/>
<map name="img3">
<area
shape="poly"
coords="141,243,168,261,182,255,206,267,222,258,248,265,270,252,301,245,311,235,306,222,330,216,336,201,328,184,313,186,304,178,281,183,271,175,255,177,237,155,211,160,206,165,195,158,175,163,170,181,154,188,155,216,140,227,140,245,170,262,208,233"
href="#鳥肉"
title="鳥肉"
alt="鳥肉"
/>
<area
shape="poly"
coords="228,149,254,129,265,131,288,115,338,131,340,168,317,181,310,183,299,175,279,179,264,171,255,174,255,174"
href="#豆腐"
title="豆腐"
alt="豆腐"
/>
</map>
<script src="jquery-3.5.1.min.js"></script>
<script src="jQuery-rwdImageMaps/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function (e) {
$("img[usemap]").rwdImageMaps();
});
$("area").hover(
function () {
$(this).append(`<div>${$(this).attr("title")}</div>`);
},
function () {
$(this).find("div:last").remove();
}
);
</script>
</body>
</html>
jQuery 弱者なのでコードの汚さは許して...
完成品
鍋が食べたくなりますね！
まとめ
いつもながら先人ありがとう！
領域指定をもっと楽にする方法考えたいところ。