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のペイントで左下あたりに座標が表示されるので、そこを見て調べる。
関連記事
-
-
HTMLのimgタグでブラウザ幅によって異なる画像を表示する方法
あるサイトのコーディングデータを貰った際に1つのimgタグに対して複数の画像が指 ...
-
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか？」「拡 ...
-
-
JSやCSSをCDN呼び出しする際のintegrity / crossorigin / referrerpolicy属性について
JavaScriptやCSSをCDN呼び出しする際、<script> ...