HTMLで画像の指定した部分のみリンクを設定する方法
2024/03/04
画像を表示させて、その画像の一部分のみにリンクを張りたかった。画像を重ね合わせたりとかそういった手間が必要なのかと思ったけど以下方法でいけるみたい。
サンプル
https://taitan916.info/sample/imglink/
※水色とピンクは一つの画像だけど、ピンクの部分のみリンクにしている。
ソースコード
<html>
<head>
</head>
<body>
<img src="test.jpg" usemap="#linkarea">
<map name="linkarea">
<area shape="rect" coords="180,214,299,307" href="javascript:void(0);" onClick="alert('link');">
</map>
</body>
</html>
その他
リンクの範囲に関しては多角形や円形、四角形が設定できる。ソースでは四角形を用いた。coordsのところは四角形の「左上x座標,左上y座標,右下x座標,右下y座標」を記述する。Windowsのペイントで左下あたりに座標が表示されるので、そこを見て調べる。
関連記事
-
-
JSやCSSをCDN呼び出しする際のintegrity / crossorigin / referrerpolicy属性について
JavaScriptやCSSをCDN呼び出しする際、<script> ...
-
-
lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...
-
-
form送信後にURLにアンカータグ(ハッシュタグ)をつける方法
フォームからGETもしくはPOSTで送信し、その後のURLにアンカータグ(ハッシ ...
-
-
HTML5のカレンダーピッカーについて(input type="date")
とあるシステムのフォーム部分を改修する案件があった為、内容を確認していると日付入 ...
-
-
htmlのarticle
コーダーさんから渡されたソースに<article>という 記述があり ...