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 ...
-
-
HTMLのformでオートコンプリートを無効にする
WordPressでタグ入力はオートコンプリートが効かず、他のフォームではオート ...
-
-
tableにスクロールバーを付ける
レイアウト的にiframeじゃなくtableにスクロールバーを つけたかった。 ...
-
-
form送信後にURLにアンカータグ(ハッシュタグ)をつける方法
フォームからGETもしくはPOSTで送信し、その後のURLにアンカータグ(ハッシ ...