【HTML】クリッカブルマップのクリック位置に図形を重ねたい

前提・実現したいこと

クリッカブルマップ上に、赤枠などを追加して重ねたい。
赤、緑、黄色……など様々なものを利用したい為
CSSで枠色の固定はあまり考えていない。

似た質問があったため、参考にさせてもらったものの上手くいかない。
丁度似た質問があったため内容をコピーさせてもらったが、
その人も上手くいっていない様子。

発生している問題・エラーメッセージ

クリッカブルマップのareaに直接borderを追加したり
色変更したりしてみたが変化なし。
imageの横に数pxほど間があいていることが原因だと思うが

該当のソースコード

HTML
1<!DOCTYPE html>
2
3<html>
4<head>
5    <meta charset="utf-8" />
6    <title>タイトル</title>
7</head>
8<body>
9
10    <div style="width:1000px">
11    <div style="position: absolute;left:10px;top:30px; Width:60px;Height:80px; border:solid 3px red; ;pointer-events: none;"></div>
12    <img src="TEST.jpg" usemap="#image-map" width="100%">
13    <map name="image-map">
14	<area shape="rect" coords="10,30,70,110" alt="テスト" href="リンク">
15    </map>
16    </div>
17</body>
18</html>

試したこと

数px、手動で移動したら重なったが
毎回手動でずらすのも大変なため、なるべくなら分かりやすく変更したい。

一番楽なのが、areaそのものにborderなどを追加できること。
outlineを可視化するのもありかとおもったのだけれど
フォーカスが当たっていないと表示されないようなので
複数クリック可能エリアがある場合は意味をなさない。

imgはブロック要素のためPタグで囲んだほうが良いというのを見かけたが
それを実施しても変化なし。

body{
margin:0;
}
これを実施したら、結構良くなった気がする。
だが、ピッタリにしたいのに、右側と下側は少しずれてしまう。

Lhankor_Mhy

2021/08/05 01:50

shape="rect" でいいならば、クリッカブルマップをやめて、<div style="position: absolute... を a要素にするなどした方が早そうかな、と思うのですが、それではダメですか？

Kokko3

2021/08/05 02:08

ありがとう。確かにリンクにしたほうがあっさりいきそうなのだけれど他の図形も試す予定のため、なるべくならクリッカブルマップをと思ってる。

Lhankor_Mhy

2021/08/05 05:35

そうでしたか。では、SVGを使うことはすでにご検討済みですか？ https://sezaki-design.com/blog/236/

行動規範の内容に同意します

回答2件

ベストアンサー

ご提示の問題を解決するだけなら、以下でいいと思います。

html
1    <div style="width:1000px;position: relative;">
2        <div
3            style="position: absolute;left:10px;top:30px; Width:60px;Height:80px; border:solid 3px red; ;pointer-events: none; box-sizing: border-box;">

position プロパティが absolute の場合、包含ブロックは position の値が static 以外 (fixed, absolute, relative, sticky) の直近の祖先要素におけるパディングボックスの辺によって構成されます。

レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN

border-box は、要素に指定した width および height の中で境界線およびパディングを取るようにブラウザーに指示します。

box-sizing - CSS: カスケーディングスタイルシート | MDN

ですが、rect ではない shape も試してみたいとのことなので、SVGなどを試した方がいいのではないかな、と思いました。

html
1    <div style="width:1000px;position: relative;">
2        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="position: absolute;pointer-events: none;">
3
4            <path d="M 10,30
5            L 10,110 70,110 70,30
6             z" stroke="red" fill="none" />
7        </svg>
8        <img src="http://placehold.jp/150x150.png?text= TEST.jpg" usemap="#image-map" width="100%">
9        <map name="image-map">
10            <area shape="rect" coords="10,30,70,110" alt="テスト" href="リンク">
11        </map>
12    </div>

そして、ここまでやるのであれば、そもそも map がいらないです。

html
1    <div style="width:1000px;position: relative;">
2        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="position: absolute;">
3            <a href="http://example.com">
4                <path d="M 10,30
5                L 10,110 70,110 70,30
6                 z" stroke="red" fill="transparent" />
7            </a>
8        </svg>
9        <img src="http://placehold.jp/150x150.png?text= TEST.jpg" width="100%">
10    </div>

投稿2021/08/05 06:01

Lhankor_Mhy

総合スコア36981

Kokko3

2021/08/05 06:45 編集

ありがとう。 box-sizing: border-box;　そして　親のdivにrelativeを設定したらピッタリになった。びっくりした。ありがとう！調べていくうちにsvgというのも引っかかったがあまりよく分かっておらず手を出せていなかった。書き方がちょっと複雑そうなため、難しそうだ。でも勉強してみる。 <polygon points="0,200 250,50 220,350 600,150" こんな書き方もできそうと書いてあるので、問題なさそうだ。ありがとう。

Lhankor_Mhy

2021/08/05 06:46

お役に立てたようで何よりです。

行動規範の内容に同意します

こんな感じになればいいのでしょうか？位置を制御するposition要素と重なりを制御するz-index要素を用いて、ブロック要素を重ねてもクリッカブルマップは有効のようです。あと、空の四角形ボーダーを作るにはdisplay: block;でいけます。

２個だけなら疑似要素を使うこともできます。

html
1<style>
2*{
3	margin: 0px;
4	padding: 0px;
5}
6.map{
7	position: absolute;
8	z-index: 0;
9}
10.point1{
11	position: absolute;
12	display: block;
13	left:1px;
14	top:1px;
15	width:60px;
16	height:80px;
17	border:solid 3px red;
18	pointer-events: none;
19	z-index: 1;
20}
21.point2{
22	position: absolute;
23	display: block;
24	left:5px;
25	top:5px;
26	width:60px;
27	height:80px;
28	border:solid 3px blue;
29	pointer-events: none;
30	z-index: 2;
31}
32.point3{
33	position: absolute;
34	display: block;
35	left:10px;
36	top:10px;
37	width:60px;
38	height:80px;
39	border:solid 3px green;
40	pointer-events: none;
41	z-index: 3;
42}
43</style>
44</head>
45<body>
46
47    <div style="width:1000px">
48    <div class="map">
49    <img src="TEST.jpg" usemap="#image-map" width="100%">
50    <map name="image-map">
51	<area class="point1" shape="rect" coords="10,30,70,110" alt="テスト" href="リンク">
52	<area class="point2" shape="rect" coords="10,30,70,110" alt="テスト" href="リンク">
53	<area class="point3" shape="rect" coords="10,30,70,110" alt="テスト" href="リンク">
54    </map>
55    </div>
56</body>
57</html>