画像の一部分のみリンクを設定する方法

2015/04/16

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

■サンプル

http://sample.taitan916.info/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")

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

: IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

: FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

: フォームのresetについて

<input type="reset">についてクリックしたら初期 ...

: submitについて

<button>タグや「input type="image"」はデフ ...

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

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

: フォームでカラーコードを入力したい際に便利な方法

あるフォームの項目でカラーコードを入力したいというケースがあった。だいぶ前に同じ ...

: metaタグでSEO

同じページに複数項目があり、その項目によって SEO対策を行う、というものがあっ ...

: スマホでページ内リンクからGoogleMapアプリを開く

スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...

: formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても内容は送信さ ...

PREV: 画像をドラッグ&ドロップでアップロードする方法
NEXT: GoogleMapAPIで現在地取得と目的地までのルート表示

画像の一部分のみリンクを設定する方法

関連記事