勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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

   

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

 

■サンプル

http://sample.taitan916.info/imglink/

※水色とピンクは一つの画像だけど、ピンクの部分のみリンクにしている。

 

■ソース

 

■その他

リンクの範囲に関しては多角形や円形、四角形が設定できる。ソースでは四角形を用いた。coordsのところは四角形の「左上x座標,左上y座標,右下x座標,右下y座標」を記述する。Windowsのペイントで左下あたりに座標が表示されるので、そこを見て調べる。

 - HTML

  関連記事

WebStorageについて

HTML5で規定されている、Webブラウザ内部のKVS(キーバリュー型データスト ...

ajaxを使わずに非同期っぽくsubmitする

ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...

submitについて

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

navタグ

デザイナーさんより受け取ったファイルにて navという見慣れないタグがあったので ...

IEの表示崩れ

IEにて表示崩れが発生する際、ドキュメントモードが 互換モードになっている場合が ...

thead/tbody/tfootタグについて

テーブルのソートで何気なく使った<thead>と<tbody& ...

HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

html内に動画を埋め込んで配信する方法

Webページ内にYoutubeとかを用いずに、動画ファイルを配信したいというケー ...

formのテキストボックスやテキストエリアにサンプルの値を表示させる

テキストボックスでplaceholderという 見かけない記述があったのでメモ。 ...

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

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