クリッカブルマップを使って、写真画像の一部からリンク

　写真画像の一部をマウスでクリックすると、定められた位置へリンクする方法をご紹介します。この機能は、Webブラウザが持つ機能の一つで、クリッカブルマップとして知られており、HTMLタグのみで実装できます。

クリッカブルマップを使って、写真画像の一部からリンクする方法

ネットが普及し始めた１０年前には、Webブラウザでできることも限定されていました。

　でも、画像の一部をクリックすると、定められた位置へリンクするクリッカブルマップの機能は、

　その当時でもすでにあり、少しこじゃれたページではよく見かけたものです。

　しかし、最近では、動的なウェブページが増えた上に、様々なウェブツールや言語も普及したせいか、

　ほとんど見かけることがなくなりました。

　でも、クリッカブルマップは、時には便利ですので、いつもながら備忘録も兼ねてご紹介しておきます。

　クリッカブルマップのhtmlタグ例は、次です。


<img src="map.jpg" width="500" height="500" usemap="#maplabel" border="0">


<map name="maplabel">
<area shape="circle" coords="50,50,10" href="c1.html" alt="c1">
<area shape="rect" coords="100,100,150,150" href="r1.html" alt="r1">
<area shape="polygon" coords="200,200,400,200,300,100" href="p1.html" alt="p1">
</map>

説明：
①画像　では、対象となる画像を設定し、usemapで対応するクリッカブルマップを設定する。

②クリッカブルマップ　では、①画像に対して、クリッカブルマップの領域を設定定義する。

　なお、領域設定の形状（area shape)には、３つが用いられる。

　・circle（円形）　　　　：coords（中心x座標，　中心y座標，　半径）

　・rect（四角形）　　　：coords(左上x座標，　左上y座標，　右下x座標，　右下y座標)

　・polygon（多角形）　：coords（点1のx座標，　点1のy座標，　点2のx座標，　点2のy座標，・・・）

　タグ自体は容易に理解できるものですが、領域設定を座標指定で行うのが大変です。

　そこで、ROCKY MAPなどの便利なフリーソフトが存在しますので、利用するといいでしょう。

　それでは、クリッカブルマップを使用した写真画像を示します。

　上の画像は、上海のシンボルタワーでもあるテレビ塔「東方明珠」です。

　マウスで、タワーをクリックしてみてください。

　すると、リンク先に設定した、このページの下の方にある「東方明珠」画像にリンク（飛ぶ）されるはずです。

　ここでは、ラベルを用いて、同じページ内の画像にリンク（移動）しましたが、

　リンク先に、同一ページの文字や、他のウェブページのURLなどを指定しても構いません。

　リンク先は、②クリッカブルマップの　href=　で指定します。

　さらに、alt属性を用いることで、クリッカブルマップで領域指定した個々の部分に、

　マウスカーソルを合わせると、文字がでるように設定できます。

　ここでは、alt="東方明珠"　として、マウスカーソルを合わせると、「東方明珠」と文字が出現するように

　設定しています。

　では、うまくリンクされることを確認できるように、

　以下に、空白を入れた後に、「東方明珠」画像を示しておきます。

　紹介した事項により生じた不都合などには責任は負えませんので、くれぐれも自己責任でお願いします。