このサイトについて

ホーム

WEB制作支援

WEBデザイン

WEB運営

特集・トピックス

リンク集

Home >> Webデザインテクニック >> １枚の画像から複数のリンクを貼る

１枚の画像から複数のリンクを貼る

サンプルと機能

<A>タグを用いて１つの画像にリンクを設定する場合、リンク先は当然１つになります。
しかし、HTMLのイメージマップと呼ばれる方法を用いれば、
１つの画像の任意の部分から複数の画像を設定することができます。

オレンジ色の施設にカーソルを合わせてみて下さい。
リンクは四角形だけでなく、円形や多角形に貼ることもできます。

サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。

解説・注意点など

複数リンクしたい画像にusemap属性を記述し、#mapIDのように「#」をつけて名前を設定します。

AREAタグはいくつでも指定することができます。
shapeはリンクの形を表し、coordsには次のように設定します。

・rect：四角形の左上のx座標, y座標, 四角形の右下のx座標, y座標
・cirle：円の中心のx座標, y座標, 円の半径
・poly：多角形のすべての点のx座標, y座標を交互に記述

← Webデザインテクニックに戻る

eWeb