CSSだけでマウスONリンク

▼画像内に複数リンクを設定する

新年、明けましておめでとうございます。今年も「浅舞CTS」を宜しくお願いいたします。
年末・年始の休み中は、ほとんどパソコン三昧でした。
それでも年末は27～30日までの間は毎日雪下ろしで３連チャンでした。意外と毎日作業したせいか、身体が痛くありません。不思議です。
大晦日は、施設に居るオヤジを自宅に連れて来て、正月を過ごさせる予定です。その合間に年賀状作りやWordpressのCSS独学でした。
その中で、指定した画像に対しCSSで可能なアクション、マウスONでリンク先にジャンプさせる方法を勉強してみました。
このアクションは結構便利ですので、チラシを貼り付けその中にジャンプさせたい記事があれば活用してみてはいかがでしょうか？参考にさせて頂いたサイトに見習って完成させました。　⇒　http://www.tagindex.com/html_tag/img/img_map.html

<img src="map.gif" alt="サンプル" usemap="#sample">

<map name="sample">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1">
<area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3">
<area shape="default" href="map4.html" alt="リンク4">
</map>

①img要素　②map要素　③area要素

この3つの要素を組み合わせることで、イメージマップを設定することができます。
※イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。

このページのサンプルの画像は少しピンボケ状態ですがイメージが掴めれば良いので自分の備忘録としてこのページを作りました。
画像の中程にある１～４のコラム記事にマウスオンするとリンク先にジャンプする仕掛けを作りました。

▼このページを作成と以下の記事については「ホームページ制作・運用を支援する タグインデックス Webサイト」さんの記事を引用させて頂きました。

【イメージマップ作成の流れ】

イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素、この3種類の要素で構成されています。

1. まず、イメージマップに使用する画像を用意して、それをimg要素で読み込みます。
2. map要素に name=”” を追加して、任意のマップ名（半角英数字）を指定します。
3. img要素に usemap=”” を追加して、2. で指定したマップ名をハッシュ（ # ）に続けて記述します。（このマップ名によって、画像とリンクの設定が関連付けられることになります）
4. map要素の中に、area要素を必要な数だけ配置します。
5. 各area要素に、shape=””（リンク領域の形状）、coords=””（リンク領域の座標）、href=””（リンク先のURI）、alt=””（代替テキスト）を追加して、それぞれの設定を行います。

【img要素の設定】

<img src="map.gif" alt="サンプル" usemap="#sample">

属性	値	説明
src=””	URI	イメージマップに使用する画像のURIを指定
alt=””	テキスト	代替テキストを指定
usemap=””	#マップ名	ハッシュ（ # ）に続けてマップ名を指定

※img要素には、src属性とalt属性が必須となります。

【map要素の設定】

<map name="sample"> ～ </map>

属性	値	説明
name=””	マップ名	任意のマップ名を指定

map要素にはname属性が必須となります。
このname属性で指定したマップ名を、img要素のusemap属性内に記述します。

【area要素の設定】

<area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1">

属性	値	説明
shape=””	リンク領域の形状を指定
	rect	四角形 （初期値）
	circle	円形
	poly	多角形
	default	画像全体 （リンク領域が設定されていないエリア） ※defaultの指定は、IEでは対応していないようです。
coords=””	リンク領域の座標をピクセル数で指定
	座標（X,Y）	rectの場合 … 左上の角と右下の角の座標を指定 （X,Y,X,Y）
		circleの場合 … 中心点の座標と半径を指定 （X,Y,半径）
		polyの場合 … すべての角の座標を指定 （X,Y,X,Y …）
		defaultの場合 … coords属性の指定は不要
href=””	URI	リンク先のURIを指定
nohref	値は不要	その領域にリンクを設定しない （href属性の代わりに使用）
alt=””	テキスト	代替テキストを指定

※area要素にはalt属性が必須となります。
※URIとは……
「URI」とは、リソースの場所を示すためのものです。リンクを設定する場合や画像などのファイルを埋め込む場合に、対象のファイルをURIで指定することになります。
shape=”” に default が指定されたarea要素は、他のarea要素よりも後に配置する必要があります。（領域が重なっている場合は、先に指定した領域が優先されるので）