勉強したことのメモ

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

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

   

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

 

■サンプル

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

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

 

■ソース

 

■その他

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

 - HTML

  関連記事

110126-HTML5_Logo
submitについて

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

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

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

images
mp3ファイルのアップロードと再生方法

mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...

110126-HTML5_Logo
フォームのresetについて

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

110126-HTML5_Logo
readonlyについて

日付ピッカーとかをテキストボックスに入れた際に、 ピッカー入力とあわせて直接入力 ...

110126-HTML5_Logo
Content Security Policyの設定

Content Security Policyの設定をする事があった。Conte ...

110126-HTML5_Logo
ブロック要素とインライン要素

デザイナーさんやコーダーさんが、 「ブロック属性が云々」「インライン属性が~~」 ...

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

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

110126-HTML5_Logo
HTML、javascriptソースの暗号化

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

Top-Ten-Google-SEO-Ranking-Factors
metaタグでSEO

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