CSSだけでマウスONリンク

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

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

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

test_CTSA4チラシ640×906

リンク1 リンク2 リンク3 リンク4

▼このページを作成と以下の記事については「ホームページ制作・運用を支援する タグインデックス 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要素よりも後に配置する必要があります。(領域が重なっている場合は、先に指定した領域が優先されるので)

Follow me!

投稿者プロフィール

近江公人
近江公人asamai-cts Owner
あさまいCTSの代表オヤジです(2021年現在=60歳)
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会 実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年1月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成 その他何でも屋みたいなものです・・・
備忘録

前の記事

url_jump_004