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のペイントで左下あたりに座標が表示されるので、そこを見て調べる。
関連記事
-
スマホでフォームの画像アップロード部分でカメラを起動させる方法
formの画像アップロード部分で、スマホの場合にカメラで撮影させたい。以下に対応 ...
-
form送信後にURLにアンカータグ(ハッシュタグ)をつける方法
フォームからGETもしくはPOSTで送信し、その後のURLにアンカータグ(ハッシ ...
-
baseタグ
<base>という見かけないタグがあったのでメモ。 相対パスの基準U ...
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか？」「拡 ...
-
HTML内に動画(mp4ファイル)を埋め込んで配信する方法
Webページ内にYoutubeとかを用いずに動画(mp4)ファイルを配信したいと ...