記事の内容
map要素とarea要素
map要素は、area要素と組み合わせて画像領域ごとにリンク先を指定する要素になります。
map要素とarea要素
記法
<img src=”画像のURL” usemap=”#ID名”>
<map name=”画像ID名”>
<area shape=”形状” coords=”座標” href=”リンク先のURL”>
<area shape=”形状” coords=”座標” href=”リンク先のURL”>
</map>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="main.css" rel="stylesheet" />
<title>map要素に関して</title>
</head>
<body class="body">
<img src="../png/area-map.png" usemap="#imagemap" />
<map name="imagemap">
<area
shape="poly"
href="https://ja.wikipedia.org/wiki/CSS"
coords="339,155,355,327,422,348,493,328,509,155"
/>
<area
shape="poly"
href="https://ja.wikipedia.org/wiki/CSS"
coords="85,155,98,327,167,349,237,329,254,155"
/>
</map>
</body>
</html>
属性
shape属性
shapeは、画像内リンクの領域形状を指定するために使用します。
target属性
targetは、リンクページをどのように開くかを決める属性になります。
※わからない方はa要素のtarget属性を参考どうぞ
記法
<area shape=”形状” coords=”座標” href=”リンク先のURL” target=”属性値”>
