ベストアンサー

IMAGE MAP

2006/05/18 11:45

下記URLの様にマップのリンクをクリックし、リンク先をマップの上へ表示させる物作りたいのですが、説明されているサイト等、ご存知の方教えてください。またソフト等があれば、教えていただきたいです。お願いします。 http://news.bbc.co.uk/hi/english/static/in_depth/world/2000/world_water_crisis/default.stm

rookrookrook
お礼率46% (75/162)

ホームページ作成ソフト
回答数5
ありがとう数1

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

chinensis
ベストアンサー率40% (54/132)

2006/05/18 15:23 回答No.5

＃４です。簡単に主要処理を抜き出してみました。ＩＥのみこのままで動作します。具体的に判らないところがあれば再度ご質問ください。 <HTML> <HEAD> <TITLE>画面内でポップアップするウインドウサンプル</TITLE> <SCRIPT LANGUAGE="Javascript">  </SCRIPT> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY BGCOLOR="#CCCCFF"> <A NAME="#top"></A> <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="600"> <tr> <td><a href="#aaa" onClick="void show('aaa',50,100);">aaa</a></td> </tr> <tr> <td><a href="#bbb" onClick="void show('bbb',100,100);">bbb</a></td> </tr> </table> <DIV CLASS="hiddenDivs" ID="intro"></DIV>  <DIV CLASS="hiddenDivs" ID="aaa" STYLE="width:360"><A NAME="aaalink"></A> <TABLE WIDTH="360" CELLPADDING="0" CELLSPACING="0" BORDER="0"> <TR><TD BGCOLOR="#999999"><B> aaaのタイトル</B></TD> <TD BGCOLOR="#999999" ALIGN="RIGHT"><a href="#close" onClick="void hide(layerOnDisplay);">close</a></TD></TR> <TR><TD BGCOLOR="#000000" COLSPAN="2" height="1"></TD></TR> <TR><TD BGCOLOR="#9999CC" WIDTH="360" COLSPAN="2">aaa本文</TD></TR> </TABLE></DIV>  <DIV CLASS="hiddenDivs" ID="bbb" STYLE="width:360"><A NAME="bbblink"></A> <TABLE WIDTH="360" CELLPADDING="0" CELLSPACING="0" BORDER="0"> <TR><TD BGCOLOR="#999999"><B> bbbのタイトル</B></TD> <TD BGCOLOR="#999999" ALIGN="RIGHT"><a href="#close" onClick="void hide(layerOnDisplay);">close</a></TD></TR> <TR><TD BGCOLOR="#000000" COLSPAN="2" height="1"></TD></TR> <TR><TD BGCOLOR="#9999CC" WIDTH="360" COLSPAN="2">bbb本文</TD></TR> </TABLE></DIV> </BODY> </HTML>

その他の回答 (4)

chinensis
ベストアンサー率40% (54/132)

2006/05/18 14:07 回答No.4

全てJavaScriptで作成されています。簡単ですがわかる範囲でやっていることの解説を。ソースをご覧になると判ると思いますが、クリッカブルマップに対しonClickイベントでshow()関数を用いて、ソースの下部で定義されているhiddenDivsクラスの内容を指定された位置（left,top)に表示しています。これは予め作成しておいたobjectの内容を、入れ替えて表示（Visible)しているんですね。その際、指定された位置にobjectを動かしているため「新たにポップアップしたように見える」効果だと思います。 closeにつきましても、closemapをcloseボタンに定義し、現在表示されているobjectを非表示(hide)することで閉じたことを表しています。試しにこのページのソースを引用してご自身で作ってみるのが最も理解しやすいと思いますよ。スタイルシート以外は全てこのページのソース内で定義されています。

noname#67354

2006/05/18 13:17 回答No.3

＞マップのリンクをマップの上に表示させる＞ＵＲＬにあるようなイメージマップの上に重ねて表示する方法 …それを「イメージマップ」と言うのでは？それともリンクのURLがマウスカーソルの所にポップアップのように出るようにしたいのでしょうか。それであればaltで代替テキストを入れるのがいいと思います。先ほどの中段のURLページに説明があります。 <area shape="～～～ alt="Test Page 1">　のような要領です。

noname#67354

2006/05/18 12:42 回答No.2

もしホームページビルダーをお使いであれば、簡単にできます。 http://www.wsb.jp/hpb/ouyou/image_map02.htm そうでない場合はちょっと面倒ですが、以下のサイトを参考に。 http://www5.plala.or.jp/vaio0630/hp/imagemap.htm フリーのイメージマップ作成ソフトを使うと面倒でないようです。 http://www.vector.co.jp/soft/win95/net/se062427.html

質問者