ソース
<html>
<img src="images/map.gif" usemap="#sample" border="0">
<map name="sample">
<area shape="rect" coords="23,108,117,145" href="info.html">
<area shape="circle" coords="193,110,48" href="menu.html">
<area shape="polygon" coords="270,136,408,84,416,148" href="search.html">
<area shape="default" nohref>
</map>
</html>
|
１）まず、Mapにしたい画像(gifなど)を用意しましょう。
<Map>～</Map>タグでマップデーターを定義します。
(<html>～</html>の外でも構わない)
２）Mapに自分で適当な名前を付ける。ここでは、
<map name="sample">～</map>
３）Mapにする画像の<img>タグにの中に 「usemap="#sample"」を加えてマップデーターを指定する。
(Mapに名前を付けるのは、その為です。)
４）<Map>タグ内の説明
「shape="rect"」は、四角。
「shape="circle"」は、円形。
「shape="polygon"」は、多角形。
「shape="default"」は、それ以外の領域。
(「shape="default" nohref」とすると領域外での、
リンクはない事になる)
「coords="**,**,..."」で座標の指定。(数値入力－単位：pixels)
「href="***.html"」は、リンク先の指定。(フレームでの場所を指定したい場合は、「href="***.html" target="***"」)
|
.
Ｙ軸↑
Ｘ軸 →
|
（１）．四角の左上の角の座標(X,Y)を図る。
ここでは、「23,108」
この数字をそれぞれ「①,②」とする。
（２）．四角の右下の角の座標(X,Y)を図る。
ここでは、「117,145」
この数字をそれぞれ「③,④」とする。
（３）．これを「coords=""」の中に入れます。
すると、「coords="①,②,
③,④"」となります。
ソースにすると、(shape="rect"は、四角の定義)
<area shape="rect" coords="23,108,117,145" href="info.html">
|
.
|
（１）．円の中心の座標(X,Y)を図る。
ここでは、「193,110」
この数字をそれぞれ「①,②」とする。
（２）．半径の値を出す為にX軸かY軸に水平又は垂直に(X,Y)を図る。
ここでは、Y軸にそって計り「193,62」となりました。
Y軸にそって計ったのですから、ここで中心でのY値と円周でのY値の差を出します。
「48」となり、
これを「③」とします。
（３）．これを「coords=""」の中に入れます。
すると、「coords="①,②,
③"」となります。
ソースにすると、( shape="circle"は、円形の定義)
<area shape="circle" coords="193,110,48" href="menu.html">
|
.
（１）．
多角形は、すべての角の座標(X,Y)を図る。
(どこの角から計り始めても良い)
ここでは、三角形なので三個所の座標(X,Y)を図ります。
「270,136」
この数字をそれぞれ「①,②」とする。
「408,84」
この数字をそれぞれ「③,④」とする。
「416,148」
この数字をそれぞれ「⑤,⑥」とする。
（２）．
これを「coords=""」の中に入れます。
すると、「coords="①,②,
③,④,
⑤,⑥"」となります。
ソースにすると、(shape="polygon"は、多角形の定義)
<area shape="polygon" coords="270,136,408,84,416,148" href="search.html">
|
.
|
（１）．自分の持っているグラフィックソフトなどで座標(X,Y)を図る。
Micrografx Picture Publisher6.0の場合
①ツールバーの「表示(V)」→「情報の表示(I)」をクリックして「情報」Viewを表示させる。
②数値を計る前に、単位の設定が「ピクセル」になっているかを確認する。
ツールバーの「ツール(T)」→「オプション(O)」をクリックして「オプション」Viewを表示させる。
その中の「単位」を開き「単位(T)」の欄を「ピクセル」にして「OK」を押す。
③その後、ポインターを画像に持っていって計ると、「情報」に「ピクセル」値が表示されます。
Adobe Photo Shop4.0の場合
①ナビゲーターパレットの「情報」を開く
②数値を計る前に、単位の設定が「ピクセル」になっているかを確認する。
ツールバーの「ファイル(F)」→「環境設定(F)」→「単位・定規(U)」をクリックする。
又は、「ファイル(F)」→「環境設定(F)」→「一般」をクリックして「単位・定規」を表示させる。
(バージョンによっては、「ファイル」→「環境設定」かもしれない)
その中の「単位・定規」を開き「単位(U)」の欄を「pixels」にして「OK」を押す。
③その後、ポインターを画像に持っていって計ると、「情報」に「ピクセル」値が表示される。
（２）．Mapedit(クリッカブルマップの作成Soft)を購入する。
Mapeditのダウンロード
|
|
