あらすじ
画像に色々埋め込みたくなったので、イメージマップ使ってみました。
インデックス
目指すもの
今回使う画像はこちら。
この美味しそうな水炊き鍋の「鳥肉」と「豆腐」にホバーしたら文字が表示されるようにします。
イメージマップを作る
領域を指定する
この作業が一番大事かつ一番めんどいです！
簡単にやる方法求む。
今回は 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><htmllang="ja"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><linkrel="stylesheet"type="text/css"href="style.css"/><title>Clickable Map</title></head><body><imgsrc="img/food_nabe_mizutaki.png"usemap="#img3"alt="水炊き"id="img3"/><mapname="img3"><areashape="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="鳥肉"/><areashape="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 弱者なのでコードの汚さは許して...
完成品
鍋が食べたくなりますね！
まとめ
いつもながら先人ありがとう！
領域指定をもっと楽にする方法考えたいところ。