部分的にリンク

質問

ホームページビルダなどを使うと、地図などの画像の

部分的にリンクを張ることができますが、HTMLできますか？

回答No.4

Joh_Taka · ベストアンサー

座標を正確に算出するためには、Pixel単位で画像の各ポイントを表示出来るPhotoshopのようなグラフィックソフトがなければ、困難です。
（言葉を返せば、Pixel単位でポイントを表示出来るグラフィックソフトがあれば、いとも簡単且つ正確に座標は出せます。）

それほど厳密でなくとも良いのでしたら、例えば横300Pixel、縦200Pixelの画像があったとします。
その画像の右下角に接する形で、全体の横サイズの三分の一、縦サイズの二分の一の領域で長方形のクリッカブルマップを作成するならば・・・
この場合のクリッカブルマップの範囲を指定する<area>を記述すると、shape属性は（四角形なので）rect。coords属性での左上角のX座標は200、同じく左上角のY座標は100、右下角のX座標は300、同じく右下角のY座標は200となるので、この数値をカンマ区切りで並べて・・
<area shape="rect" coods="200,100,300,200" href="リンク先.html">
となります。

座標の出し方は、参考URLで詳しく解説していますのでご覧下さい。

繰り返しになりますが、正確に座標を出すためには、グラフィックソフトやクリッカブルマップ作成支援ソフトがなければちょっと面倒ですね。

Windowsユーザでしたら、フリーソフトもいくつかリリースされていますので、それを使った方が良いかもしれません。

まっぷエディタ
http://www.vector.co.jp/soft/win95/net/se191731.html

参考URL：

http://member.nifty.ne.jp/f-page/hp/html2/cmap01.html

お礼

いろいろとご説明ありがとうございます。

座標は難しそうですが、試してやっていきたいと思います。

フリーソフトも参考にさせて頂きます。

回答No.3

Joh_Taka

matrix4さんは、何か勘違いをされているようです。

補足欄にある「これを見ると、（ソース）」とは、

http://tohoho.wakusei.ne.jp/html/map.htm

の「<map> - クリッカブルマップの使用例」を指してのことと思われますが、とほほさんのサイトでの「ブラウザ表示例」の図は、map.gifという一枚の画像ファイルのみです。
その一枚の長方形の図の中で、クリッカブルマップを設定する領域の形や位置を分かりやすく解説するために、敢えてリンク部分を別な色で枠組みしたり、「HTML偏」「JavaScript偏」「FORM/CGI/SSI偏」等と書かれているだけです。

つまり、グラフィックソフトを使って、多角形や円、文字を書き入れて作成された、ただ一枚だけの長方形の画像なのです。
（画像の角を右クリック → [名前を付けて画像を保存] すれば、一枚の画像だけだと分かるはずです。）

Sourceのalt="HTML"は、画像が表示されなかったときの代替テキストなので、サイト閲覧者が分かりやすければ、どの様な文字であっても、基本的には構わないのです。
画像に書かれている文字（文字も画像の一部です）と直接の繋がりはありません。

他の方々が回答されているように、画像の中のどの部分にクリッカブルマップを設定したいのか、座標さえ分かれば、もちろんHP作成ソフトを使わずに、HTMLの記述で作成出来ます。

補足

では、座標ですが

クリッカブルマップを設定したいのか＞

これは、マップ上の位置関係の座標は素人でもわかりますか？

回答No.2

hana-hana3

もともとＨＴＭＬの技術です。
ビルダーはホットリンクを作成してくれる手伝いをしているに過ぎません。

イメージマップとも呼ばれています。
画像に仕掛けがあるのではくて、画像の座標を基準にリンクを張る仕組みなので、画像のサイズさえわかっていれば、ＨＴＭＬだけで作成できます。

参考URL：

http://www.scollabo.com/banban/lectur/ht16.html

お礼

ありがとうございます

補足

これを見ると、（ソース）

img src="image/map.gif" alt="画像"
usemap="#map_TEST"
border=0 width=243 height=68>
<map name="map_TEST">
<area
shape=rect
coords="11,16,63,54"
alt="HTML"
href="../html/index.htm">
<area
shape=poly
coords="73,50,159,50,159,24,73,9"
alt="JavaScript"
href="../js/index.htm">
<area
shape=circle
coords="197,32,28"
alt="CGI"
href="../wwwcgi.htm">
<area
shape=default
alt="Other"
href="../www.htm">
</map>

ですが、リンク部の”HTML"、”JAVA　SCRIPT"、”FORM/CGI/SSIの後の、”偏”はどこにあるのでしょう？

回答No.1

the845t

使わなくてもできます。
http://tohoho.wakusei.ne.jp/html/map.htm
が参考になると思います。

参考URL：

http://tohoho.wakusei.ne.jp/html/map.htm

お礼

ありがとうございます。