画像の特定の場所にリンクを貼る

ホームページ制作に役立つすご技”を見つけた。

《画像の一部にリンクを貼る方法》である。あひるも恥ずかしながら拙いサイトを作り、何年も前から運営?していたがこの方法を知らなかった。即ちに導入・実行。その方法を自分流に整理(ほとんど転載)し、メモとして残しておく。
【出典】「・・鶯教(AI)」の中にある《http://uguisu.skr.jp/html/subimg.html》


trt_heaven.jpg

上の画像は、あひるの自己サイトのヘッダー画像である。諸々の都合でタイトル文字と副題も画像と一体化してある。そのため、タイトル文字などにリンクをはることが少し面倒である。リンクを貼るには、文字の上に透明オブジェクトを被せて、それにリンク付けしなければならない。

これまで、そんな苦労をしていた。でも今度の方法を使えば、画像のどこにでも自由にリンクを貼れる。まことに有難い技だ。

画像の一部にリンクを貼る方法・・・http://uguisu.skr.jp/html/subimg.htmlより転載(一部書替え・編集)

<HTML>
<HEAD>
<TITLE>□□□□□□</TITLE>
</HEAD>
<BODY>

<div>
<IMG SRC="./lib/subimg1.gif" ALT="トップ画像" border="0" usemap="#top"
<map name="top">
<area shape="rect" coords="120,120,210,155" href="./index.html">
</map>

</div>

</BODY>
</HTML>


1) 画像を貼るタグの中で、usemap="#○○○"として○○○に何か名前を入れる。

2) <map name="○○○">として、○○○に 1)で指定した名前を入れる。

3) <area shape="rect" coords="120,120,210,155" href="./index.html">

【解 説】 
shape・・リンクを指定する範囲の形を指定する。
指定できるのはcircle、rect、poly、defaultの4つの値で、それぞれの値が意味するものは、円、四角形、多角形、画像全体となる。

coords・・画像の範囲を座標軸の考え方に基づき指定する。
shapeで指定した形によって、それぞれ指定の仕方が変わってくる。

指定する値を一覧は、次の表のとおり。

〔Shape〕・・・〔指定する値〕
-------------------------------------------------------
circle・・・・中心のX座標、中心のY座標、半径
rect・・・・・左上のX座標、左上のY座標、右下のX座標、右下のY座標
poly・・・・・全ての角の頂点のX座標とY座標

以上の値を半角カンマで仕切り、画像の左上の座標を(0,0)と考えて指定する。

上の例ではrectをshapeにしているので、四角形の左上の頂点のX座標、Y座標、そして右下の頂点のX座標、Y座標の順番に指定していして、四角形の大きさを指定している。
★複数のリンク指定する場合は、この<area shape="rect" coords="xxx,xxx,xxx,xxx" href="xxxx.html">をその数だけ指定する。

4) </map>で閉じれば完成。 ※<IMG>と<AREA>は空要素なので終了タグを記載しない。

********************

(注)FC2ブログでは、記事欄内に<”を使用できないので、上記タグでは<”(全角)を使用している。

残念ながらこの方法は、CSS用のbackground画像には適用できない。上のあひるのヘッダー画像も、本来CSSで作っていたのだが、CSSから外して今回の方法を適用した。

なお、このわざは「クリッカブルマップ」という名で、手持ちのHTML/CSSハンドブックにも載っていた。いままで見落としていたのが残念。でも、上記サイトのおかげで知ることができたのは幸い。今回参考にしたサイト「なんちゃって鶯教(AI)」は、とにかく凄いサイトであり、広く深い。今後いろいろと教えてもらえる。
 

 

COMMENTS

COMMENT FORM

TRACKBACK


この記事にトラックバックする(FC2ブログユーザー)