ホームページ(WEBページやWEBコンテンツ)を作る前に、まずは、ここの「HP作成の予備知識」をひと通り読んでいただけると嬉しいよね..

■ 10.クリッカブルマップ(イメージマップ)って何ですか?

この説明は、予備知識ではないのですが、忘れるといけないのであえてここに記述しています。

簡単にいうと、画像の中にリンクを埋め込む方法です。

クリッカブルマップ、イメージマップ、ホットスポットとか呼ばれます。
画像の一部分を範囲選択してリンクを貼り付ける方法です。
HTMLの解説」では説明を省きました。

記述方法を簡単に説明すると、

<img src="画像のファイル名" usemap="#マップの名前"> <map name="マップ名"> <area shape="形" coords="座標" href="リンク"> <area shape="形" coords="座標" href="リンク"> <area shape="形" coords="座標" href="リンク"> </map>

という具合で、形にはrect(四角形)、circle(円)、poly(多角形)を指定し、座標にはrectの場合は対角線の両座標circleの場合は中心の座標と半径polyの場合は複数の座標を指定します。

具体的な記述サンプルは、次のような感じになります。

<img src="image01.gif" border="0" usemap="#map01"> <MAP name="map01"> <AREA shape="rect" coords="10,5,30,25" href="/faqhp_page1.html"> <AREA shape="circle" coords="63,20,10" href="/faqhp_page2.html"> <AREA shape="default" nohref> </MAP>

また、あえてマップを使用しなくても、表組みを使用して画像を並べていくという方法で実現するという手法もあります。
その方法は、「CSSサンプル」−「テーブル(表)を使ってクリッカブルマップ(イメージマップ)?」で解説しました。



page update:2019/01/09 19:55

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom