一枚の画像に何箇所かリンクをはるにはどうしたらいいですか？

質問

たとえば　一枚の画像に　ゾウ　キリンが描かれていたとします。
その一枚の画像じたいにはなにもリンクをはらず、ゾウとキリンにリンクをはりたいんです。

ゾウの絵の部分をクリックしたら別のページにあたらしい窓で飛び、キリンの絵をクリックしたらまた別のページに新しい窓で別のリンク先に飛びたいのですが、どうやってできるんでしょう？

フリーソフトでありますか？
それともソフトがなくてもできますか？

初心者なので詳しく教えていただけるとうれしいです。

回答No.1

hana-hana3 · ベストアンサー

クリッカブルマップと言います。
対象位置の座標さえ解れば特別なソフトが無くても作る事は可能です。
http://park16.wakwak.com/~html-css/map/map1.html

作成ソフトも沢山あります。
（一例）
http://www.forest.impress.co.jp/article/2002/05/24/okiniiri.html

回答No.5

riku2451

象の形そのものにリンクを張るのはビルダーソフトでならできるかもしれませんが、私はその手に詳しくないのでタグだけでできる方法を書きます。

画像を貼るタグを次のようにします。
<IMG SRC="画像のファイル名" ALT="画像の名前" ALIGN="BOTTOM" WIDTH="画像の横幅" HEIGHT="画像の高さ" BORDER="0" USEMAP="#imagemap">

その後に
<map name="map">
×××</map>
を書きます。この×××の間に、画像のどの部分にどこへのリンクを張るかを命令します。

部分の指定（エリアの指定）には、次のタグと属性を使います。
<area shape="" coords="" href="">

shape はエリアの形の指定です。
coords は座標の指定です。
href はリンク先のURLです。

画像の大きさを、500×500ピクセルとしましょう。
画像の左上の部分、横100ピクセル、縦100ピクセルの長方形のエリアが、map01.html にリンクされていることを指定します。

<img src="imagemap.gif" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,100,100" href="map01.html">
</map>

座標は、画像の左上が原点（X,Y）＝（0,0）で、右方がX軸、下方がY軸となっています。

エリアの形は円と、多角形の2種類があります。また、多角形の特殊な形として、長方形があります。
それらの座標指定に付いて説明します。

・長方形 shape="rect"
長方形の左上の座標（X1、Y1）と右下の座標（X2、Y2）で指定します。
<area shape="rect" coords="X1,Y1,X2,Y2" href="URL">

・円 shape="circle"
中心の座標（X、Y）と半径r指定します。
<area shape="circle" coords="X,Y,r" href="URL">

・多角形 shape="poly"
すべての頂点の座標で指定します。どの点を（X1、Y1）にしてもかまいません。すべての角が凸の多角形が指定できます。下は5角形の例です。
<area shape="rect" coords="X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5" href="URL">

このように画像にエリアを指定して、様々にリンクを貼ることが出来ます。

複数のエリアが重なっている領域は、先に指定した条件が優先されます。

座標を指定しなかった残りの部分は以下のように、shape="default" と指定します。
<area shape="default" href="URL">

エリアをどこにもリンクさせない場合は、
href="URL" の代わりに、nohref 属性をつけます。
<area shape="rect" coords="0,0,100,100" nohref>

回答No.4

gogo_japan

HPの作成をしているのでしょうか？
初心者の方と言うことで、何らかのソフトで作成しておられるのでしょう。
ホームページ・ビルダーだと、画像の編集からイメージマップの編集を選択し、範囲を指定してリンクを張ればOKです。
その他のソフトでも同様のことが出来るはずです。
ワードなどで作成している場合は・・・・・勉強してみます。

回答No.3

X-trail_00

http://www.htmq.com/html/map.shtml
ホームページであれば上記のようにすればできます。
これを利用すると日本地図の図を置いて
各県クリックでそれぞれの情報ページへリンクなども出来ます。

もちろんソフトなんて無くてもできます
メモ帳（NotePad）があれば出来ます。

回答No.2

0KG00

http://tezuka.s9.xrea.com/tips/gazou03.htm

html上でということですか？
なら、クリッカブルマップを使えば出来ますよ。