勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

HTMLで画像の指定した部分のみリンクを設定する方法

   2024/03/04  HTML

画像を表示させて、その画像の一部分のみにリンクを張りたかった。画像を重ね合わせたりとかそういった手間が必要なのかと思ったけど以下方法でいけるみたい。

 

サンプル

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

  関連記事

HTML5のカレンダーピッカーについて(input type="date")

とあるシステムのフォーム部分を改修する案件があった為、内容を確認していると日付入 ...

lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法

画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...

JSやCSSをCDN呼び出しする際のintegrity / crossorigin / referrerpolicy属性について

JavaScriptやCSSをCDN呼び出しする際、<script> ...

同一フォーム内でクリックするボタンによって送信先を変更する方法

同一フォーム内で「登録する」ボタンと「プレビュー」ボタンを用意し、「登録する」を ...

HTMLのformでオートコンプリートを無効にする

WordPressでタグ入力はオートコンプリートが効かず、他のフォームではオート ...