TOPページ >  リンクを貼る > クリッカブルマップを作成する

クリッカブルマップを作成する

ホームページやブログなどのウェブサイトに、画像を表示する際に、画像内にクリック可能な領域を作り、リンクを貼ることができます。クリッカブルマップとも言います。マップ用画像ファイルとマップ定義します。

マップ用画像ファイルとマップ定義を指定する
<img src="画像URL" usemap="#マップ名">
マップを定義する
<map name="マップ名">
<area shape="形状" coords="座標値" href="リンク先URL">
…リンクの数だけ繰り返す
</map>

という記述になります。形状や座標の指定方法は、下記の通りです。

  1. 画像URL:クリッカブルマップで使用する画像ファイルのURLを指定します。
  2. マップ名:クリッカブルマップで使用するマップ名を指定します。任意名称です。
  3. 形状:クリッカブルマップの形状を指定します。下記の中から選択することができます。 キーワードマップ形状 default画像全体 rect四角形 circle円 poly多角形
  4. 座標値:座標値を指定します。形状により、指定する要素が異なります。
    形状座標の指定方法
    defaultなし
    rectX1,Y1,X2,Y2(対頂角 2点のⅩ座標、Y座標をカンマで区切って指定します。)
    circle中心X,中心Y,半径(カンマで区切って数値を指定します。)
    polyX1,Y1,…Xn,Yn(各頂点のⅩ座標、Y座標をカンマで区切って指定します。スタートはどこでも構いませんが、頂点はつながるようにしてください。頂点が飛ぶとクリック範囲がねじれます。)

    座標はマップ左上を原点とし、右手方向が+Ⅹ、下方向が+Y になります。下図を参考にしてください。

    clickmap_2.gif
  5. リンク先URL:クリックされたときにジャンプするURLを指定します。

こちらがサンプルです。マルや三角の図形にリンクが貼ってあります。

このソースは、次のようになります。

<img usemap="#clickmap" src="http://html.appelle.jp/sample/clickmap.gif" border="0" width="250" height="250" />
<map name="clickmap">
<area shape="rect" href="cat1/cat2/" coords="88,225,172,142">
<area shape="circle" href="cat1/cat6/" coords="58,90,40">
<area shape="poly"href="cat1/cat12/" coords="229,22,211,130,127,59">
</map>

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
ダウンロードファイルを提供する
同一ページ内へリンクする
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
リンク文字のスタイルを指定する
リンクのための基準URLを指定する
クリッカブルマップを作成する
リンク文字の背景色を指定する
リンクの説明を表示する
画像にリンクを貼る
テキストリンクを貼る
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス