• ベストアンサー

IMAGE MAP

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

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

  • ベストアンサー
  • chinensis
  • ベストアンサー率40% (54/132)
回答No.5

＃４です。 簡単に主要処理を抜き出してみました。 ＩＥのみこのままで動作します。 具体的に判らないところがあれば再度ご質問ください。 <HTML> <HEAD> <TITLE>画面内でポップアップするウインドウサンプル</TITLE> <SCRIPT LANGUAGE="Javascript"> <!-- var isNav4, isNav6, isIE4; var topChild; var leftChild; var layerOnDisplay = 'intro'; function show(placename,leftChild,topChild){ document.all[layerOnDisplay].style.visibility='hidden'; document.all[placename].style.visibility='visible'; document.all[placename].style.left = leftChild; document.all[placename].style.top = topChild; layerOnDisplay=placename; return false; } function hide(placename) { document.all[placename].style.visibility="hidden"; return false; } //--> </SCRIPT> <STYLE TYPE="text/css"> <!-- #parent {position:relative; clip:rect(0,600,600,0); z-index:1;} .hiddenDivs {position:absolute; visibility:hidden;overflow:hidden; z-index:2;} --> </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> <!--aaa 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>&nbsp;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> <!--bbb 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>&nbsp;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)
回答No.4

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

noname#67354
noname#67354
回答No.3

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

noname#67354
noname#67354
回答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

rookrookrook
質問者

補足

ＵＲＬにあるようなイメージマップの上に 重ねて表示する方法を探しています。

  • natatin
  • ベストアンサー率50% (1322/2599)
回答No.1

イメージマップ　クリッカブルマップで検索すれば出てくると思います http://www.scollabo.com/banban/lectur/ht16.html http://www5.plala.or.jp/vaio0630/hp/imagemap.htm http://tezuka.s9.xrea.com/tips/gazou03.htm Client Side Image Map Editor フリーソフト http://hp.vector.co.jp/authors/VA001944/freesoft/index.html

rookrookrook
質問者

補足

イメージマップの作り方は知っています。 知りたいのは、マップのリンクをマップの上に表示させる方法です。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • イギリスの人って"綿棒"？をたくさん使うのでしょうか？

    しょーもない質問ですみません 海岸に落ちてるごみの2位が Cotton bud sticks っていうことなんですが これって綿棒？のことでしょうか どうしてこんなゴミが多いのかわかる方いらっしゃいませんか http://news.bbc.co.uk/2/hi/uk_news/6574355.stm

  • 食料輸入大国　日本　英BBCから非難される。なぜ？

    http://news.bbc.co.uk/1/hi/world/africa/2824725.stm EUは食料輸出国の集まりで、途上国から食料をたっぷり輸入しているとは言えないだろう。 しかし、日本は食料輸出国とは呼べず、輸入大国のはず。 農業補助金は使っているとしても、たっぷり輸入している日本の名前がなぜ挙げられる？？？

  • 英文の要約

    http://news.bbc.co.uk/2/hi/asia-pacific/7099720.stm を約50wordで全てのメインポイントを含めて要約せよ。という宿題が出たのですが、自分でやっても約50wordに全くまとまりません。どうかお助けを・・・。

  • 中文：　「最牛釘子戸」とは？

    最近、中国のニュースでよく出てくる「最牛釘子戸」とは何のことですか？　「最牛」と「釘子戸」に分かれるようですが、それぞれどういう意味でしょうか？ http://news.bbc.co.uk/chinese/simp/hi/newsid_6480000/newsid_6483600/6483689.stm

  • 発見されたシェイクスピアの劇場「ザ・シアター」の場所

    最近発見されたシェイクスピアの劇場「ザ・シアター」の場所をご存知の方がいたら教えてください。 グーグルマップで場所を確認したいと思っています。 経度緯度までとは言いませんが分かりやすくお願いいたします。 AFP（日本語） http://www.afpbb.com/article/life-culture/culture-arts/2501812/3191229 BBC NEWS（英語） http://news.bbc.co.uk/nol/ukfs_news/hi/newsid_7540000/newsid_7544600/7544616.stm グーグルマップ http://maps.google.co.jp/

  • 上下同じロゴ

    http://news.bbc.co.uk/1/hi/entertainment/1056419.stm 帽子とパーカーにナイキのマークがついていますが、この帽子とパーカーは上下セットで買ったんですかね？(推測で) そもそもこの写真の用にパーカーとキャップの上下のセットは売っているんでしょうか？ 教えてください。宜しくお願いします。

  • BBC News のビデオを録画するには

    下記のページにあるようなビデオ映像を録画するアプリをご存知でしたら、教えたいただけないでしょうか。 http://news.bbc.co.uk/1/hi/business/7589291.stm この記事の真ん中辺にあるHow the government is trying to kick-start the housing marketと説明のあるビデオです。 よろしくお願いします。

    • ベストアンサー
    • Mac
  • 「公投和民調」とは何のことですか？

    カザフスタンのナザルバエフ大統領に関する以下の文で、「公投和民調」とは何のことですか？ 「納za1爾巴耶夫通過一系列公投和民調牢牢地把握権力、....」 http://news.bbc.co.uk/chinese/simp/hi/newsid_6670000/newsid_6671800/6671829.stm

  • 中文：　「打jia3」とは何ですか？

    「中国教育部成立機構専司学術打jia3(暇のヒヘンをニンベンに置き換えた字)」の文で、最後の「打jia3」はどういう意味ですか？　また、「造jia3」は、どいういう意味ですか？ http://news.bbc.co.uk/chinese/simp/hi/newsid_5010000/newsid_5019600/5019656.stm

  • a juddering fit of incapacity の訳

    以下の英文で、a juddering fit of incapacity の訳がわかりません。どなたかお教え願えないでしょうか？ With the threat of a terror attack on Britain looming large, we have come to realise exactly what it takes to bring the country to its knees in a juddering fit of incapacity - a spot of snow. [BBC UK] http://news.bbc.co.uk/1/hi/uk/2712395.stm

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する