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のformでオートコンプリートを無効にする
WordPressでタグ入力はオートコンプリートが効かず、他のフォームではオート ...
-
-
HTML内に動画(mp4ファイル)を埋め込んで配信する方法
Webページ内にYoutubeとかを用いずに動画(mp4)ファイルを配信したいと ...
-
-
ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法
ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の ...
-
-
HTMLのimgタグでブラウザ幅によって異なる画像を表示する方法
あるサイトのコーディングデータを貰った際に1つのimgタグに対して複数の画像が指 ...
-
-
mp3ファイルのアップロードと再生方法
mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...