しおたに・ドット・チャイナ 本文へジャンプ
top >クリッカブルマップを使って、写真画像の一部からリンク

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


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




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

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

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

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



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

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

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



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




<!-- @ 画像 -->
<img src="map.jpg" width="500" height="500" usemap="#maplabel" border="0">

<!-- Aクリッカブルマップ -->
<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で対応するクリッカブルマップを設定する。

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


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

 ・circle(円形)    :coords(中心x座標, 中心y座標, 半径)

 ・rect(四角形)   :coords(左上x座標, 左上y座標, 右下x座標, 右下y座標)

 ・polygon(多角形) :coords(点1のx座標, 点1のy座標, 点2のx座標, 点2のy座標,・・・)




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

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






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

東方明珠



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

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

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

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

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

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



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

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

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

 設定しています。



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

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


































































































































































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




Copyright (C) 2008, しおたに・ドット・チャイナ, All Rights Reserved.