クリッカブルマップの使い方について

このQ&Aのポイント
  • HP制作においてクリッカブルマップを使用した画像の入れ替えについて詳しく解説します。
  • クリッカブルマップを使った画像の入れ替えで起きる表示の問題について、解決方法を紹介します。
  • mapタグとareaタグを使用したクリッカブルマップの作成方法について説明します。
回答を見る
  • ベストアンサー

HP制作。クリッカブルマップについて。

HP制作。クリッカブルマップについて。 1つのページにクリッカブルマップを使った画像(オンマウスで画像を入れ替える)を二つ使いたいのですが(たとえばmapAとmapB)上手くいかず、mapAの位置にmapBの入れ替え画像が表示されてしまいます。自分では原因をつきとめることが出来ませんでした。 map nameは分けてあります。リンク先・画像・座標は省略しました。 <img src="画像" alt="マップ" id="map" usemap="#B" border="0"> <map name="A"> <area shape="poly" coords="(略)" nohref onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" >  『省略』                  </map> <img src="画像" alt="マップ画像" id="map" usemap="#B"border="0"> <map name="B"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像1"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像2"> 『省略』 </map>

  • HTML
  • 回答数2
  • ありがとう数10

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

  • ベストアンサー
  • kuzumiHK
  • ベストアンサー率72% (132/183)
回答No.2

もし、今のソースを元に修正するとすると、こんな感じでしょうか。 imgにはimg用のidを振ります。JSにはimgのurlと、変更するimgのidを指定します。 <script type="text/javascript"> <!-- function changeMapImage(url,id) { document.getElementById(id).src = url; } //--> </script> <div> <img src="hoge.gif" alt="~" width="320" height="320" usemap="#map2" id="mapimg01"> <map name="map2" id="map2"> <area shape="rect" coords="30,29,169,161" href="#" onmouseover="changeMapImage('hoge2.gif','mapimg01')" onmouseout="changeMapImage('hoge.gif','mapimg01')" /> </map> </div> <div> <img src="hoge.gif" alt="~" width="320" height="320" usemap="#map" id="mapimg02"> <map name="map" id="map"> <area shape="rect" coords="30,29,169,161" href="#" onmouseover="changeMapImage('hoge2.gif','mapimg02')" onmouseout="changeMapImage('hoge.gif','mapimg02')" /> </map> idとmapの属性は基本同じものを差したほうが安全です。 そうしないとブラウザの仕様によってnameの内容を変更しに行ったり、 idの内容を変更しに行ったり、バグが発生するからです。 細かいことはいろいろとソースをいじってみて探求してみてください。

manafi-
質問者

お礼

もう一度よく調べたところ過去の質問に似たものがありました。http://oshiete.goo.ne.jp/qa/5423784.html changeMapImageに番号を付けることで解決しました。 しかし、こちらでいただいたアドバイスがまだ理解できていないので、JSのこと・idのこと、教えていただいたものを使って勉強してみます。 ありがとうございました。

その他の回答 (1)

  • kuzumiHK
  • ベストアンサー率72% (132/183)
回答No.1

id="map"がかぶっているからです。 id属性はユニークですから同じページ内に同じidが2つあってはいけません。 <img src="hoge.gif" usemap="#map1"> <map name="map1" id="map1"> <img src="hoge.gif" usemap="#map2"> <map name="map2" id="map2"> 参考URL http://www.htmq.com/html/map.shtml

manafi-
質問者

お礼

回答ありがとうございます。 アドバイスいただいたとおりに書き換えたのですが上手くいかず(すみません)、mapの置き換え画像がmap2の位置に表示されてしまいます。map2の画像はmap2の位置に表示されます。 (id=""をimg srcの後ろからmap nameのほうに移動させるとオンマウスしても画像が代わらなくなってしまいます。なのでそこはそのままにしてあります。) <head> <script type="text/javascript"> <!--function changeMapImage(url) {document.getElementById('map').src = url;}//--> <!--function changeMapImage(url) {document.getElementById('map2').src = url;}//--> </script> </head> <body> <div> <img src="画像" alt="~" usemap="#map2" border="0" id="map2"> <map name="map2" > <area shape="poly" coords="略" nohref onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" > </map> </div> <div> <img src="画像" alt="~" id="map" usemap="#map"border="0"> <map name="map"> <area shape="rect" coords="略" href="●.html" onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="~"> </map> </div> </body>

関連するQ&A

  • クリッカブルマップをロールオーバーをしたい!

    画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1422869464 ですが、 <div> <img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map"> <map name="Map3"> <area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_01_02.jpg')" onmouseout="changeMapImage('sample_01.jpg')"> </map> </div> <div> <img src="sample_02.jpg" alt="" width="650" height="149" border="0" usemap="#Map4" id="map"> <map name="Map4"> <area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_02_02.jpg')" onmouseout="changeMapImage('sample_02.jpg')"> </map> </div> このように、クリッカブルを配した画像が続いた場合、なぜか2番目の画像にカーソルを当てると、1番上の画像がロールオーバーされるという。。。 ジャバスクリプト初心者の私にはなぜだか全く分かりません。 他の方法(フラッシュなど)もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか? どうぞよろしくお願いいたします。

  • クリッカブルマップでリンクを貼ったとき…

    クリッカブルマップでリンクを貼ったとき、リンク周りにborderのような、枠、色をつけることはできないのでしょうか? <IMG SRC="photo/建物配置図.jpg" ALT="選択してね" border="0" usemap="#haitizu"> <map name="haitizu"> <area shape="rect" coords="185,247,240,303" href="taikukann.html"" alt="体育館"> </map>

    • ベストアンサー
    • HTML
  • 画像毎に違うクリッカブルマップを設定したい

    地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 JavaScriptで制御できると思って以下のようなコードを書いたのですが、 初期画像において、クリッカブルマップ(alt=area1)を押せば正常に動作しますが、 もう一方のクリッカブルマップ(alt=area2)を押すと、 IE6の場合にエラーが発生してブラウザが終了してしまいます。 尚、FireFoxでは正常に動作します。 どこに原因があるかも分らず手詰まり状態です。 同じ現象にあわれた方で解決策をご存知の方がいらっしゃれば、ご教授下さいm(_ _)m <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <script type="text/javascript"> <!-- function ChangeImg(mapname,usemapname) { document.map0.src = mapname; document.map0.useMap = usemapname; } //--> </script> </head> <body> <img src="map0.jpg" width="300" height="300" name="map0" useMap="#usemap0"> <map name="usemap0"> <area href="JavaScript:ChangeImg('map1.jpg','#usemap1')" shape="rect" alt="area1" coords="10,100,140,200"> <area href="JavaScript:ChangeImg('map2.jpg','#usemap2')" shape="rect" alt="area2" coords="150,100,290,200"> </map> <map name="usemap1"> <area href="http://google.co.jp" shape="rect" alt="shop1" coords="50,50,250,250"> </map> <map name="usemap2"> <area href="http://yahoo.co.jp" shape="rect" alt="shop2" coords="50,50,250,250"> </map> </body> </html>

  • クリッカブルマップのリンクが‥

    クリッカブルマップでリンクさせたくて、記述いたしましたが、リンクが有効になっていません。 ブラウザ上では画像表示のままでハイパーリンクになっておらず、目的のページへ行けない状態です。 これは何が原因でしょうか。 以下、htmlの記述です。みなさま、どうかご教授のほどお願いします。 <img src="./images/menu1.jpg" usemap="#linkmap" border="0" height="81" width="500"> <map name="linkmap"> <area shape="rect" coords="x15,y22,x88,y53" href="$home" alt="ホーム"> <area shape=rect coords="x88,y22,x203,y53" HREF="http://"> <area shape=rect coords="x201,y22,x310,y53" HREF="./index.cgi?mode=top"> <area shape=rect coords="x309,y22,x418,y53" HREF="http://"> </map>

  • クリッカブル・マップのリンクが効かない

    下記のコードでpngの画像上でリンクをつけましたが、カーソルをかざしても反応が有りません。どこが間違っているのでしょうか? 皆様、ご教授お願いします <table width="750" align="center"> <tbody> <tr><td> <img src="top2.png" usemap="#top2"> <map name="top2"> <area shape="rect" coords="20,197,63,206" href="http://------.html" alt="A"> <area shape="rect" coords="78,198,121,206" href="http://------.html" alt="b"> <area shape="rect" coords="137,198,181,206" href="http://------.html" alt="c"> <area shape="rect" coords="196,198,239,206" href="http://------.html" alt="d"> <area shape="rect" coords="19,163,63,272" href="http://------.html" alt="e"> <area shape="rect" coords="77,264,121,272" href="http://------.html" alt="f"> </map> </td> </tr> </tbody> </table>

    • 締切済み
    • XML
  • クリッカブルマップがきかない!?

    html初心者です。 地図の画像上に複数のにクリッカブルマップを作成して、同ページ内のアンカーリンクへリンクを設定しています。 ※クリッカブルマップはDreamweaverで作成しています。 IEではちゃんとリンク先に行くのですが、ネスケだと、リンク先に移動しません。。どこが悪いのでしょうか??ソースは下記にある通りです。 なにか決定的にタグが抜けているんでしょうか?? 皆様、初心者な私にどうか教えてください。 よろしくお願いします。。。 ---------------------------------------------- <BODY> <div align="left"> <img src="image/map.gif" width="500" height="300" border="0" usemap="#Map"> <MAP name="Map"> <AREA shape="rect" coords="342,38,447,65" href="#01"> <AREA shape="rect" coords="333,108,439,144" href="#02"> </MAP> </div> <div> <A name="#01">一丁目</A> <A name="#02">二丁目</A> </div> </BODY>

    • ベストアンサー
    • HTML
  • アイフレームとクリッカブルマップ

    こんばんわ、イメージマップ(クリッカブルマップ)とアイフレームを 一緒に使いたいのですが、どうしてもできません><   マップのソースが <IMG src="背景画像" usemap="#g" border="0"> <MAP name="g"> <AREA shape="poly" coords="470,471,466,479,457,482,448,479,445,471,448,463,457,460,466,463" href="★" target="aifurenaka" alt="MEMO"><!-- MEMO --> <AREA shape="poly" coords="547,464,543,472,534,475,525,472,522,464,525,456,534,453,543,456" href="★" target="aifurenaka" alt="ABOUT"><!-- ABOUT --> <AREA shape="poly" coords="622,470,618,478,609,481,600,478,597,470,600,462,609,459,618,462" href="★" target="aifurenaka" alt="BOARD"><!-- BOARD --> <AREA shape="poly" coords="692,467,688,475,679,478,670,475,667,467,670,459,679,456,688,459" href="★" target="aifurenaka" alt="MIX"><!-- MIX --> <AREA shape="default" nohref><!-- デフォルトエリア --> </MAP>

  • mapが機能しない

    以下のようにmapを設置しましたが、全く機能しません。何が考えられるでしょうか? <div><img src="images/head.jpg" alt="" usemap="#map" border="0"/></div> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> <area href="kan.html#2" alt="" shape="rect" coords="314,3,393,154" /> <area href="kan.html#1" alt="" shape="rect" coords="106,3,211,146" /> </map>

    • ベストアンサー
    • HTML
  • map初心者です

    名前の付け方がわかりません。 なんでもいいのでしょうか?とりあえずわからないので画像名と同じ名前に設定しました。 また、下の記述が全部なのですが画像しかアップされません。 リンクすらなりません。 どこがおかしいのでしょうか。よろしくお願いします。 <img src="img/1.jpg" usemap="#1map" border="0"> <map name="1map">  <area shape="rect"   coords="220,148,179,200"   href="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="358,125,181,126"   href="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="167,336,178,141"   href="="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="178,338,180,214"   href="="http://12345" alt="**" target="_blank"> </map> 関係あるかわかりませんが、使っているのはロリポップです。

    • ベストアンサー
    • HTML
  • クリッカブルマップで画像と画像の間に隙間が出来てしまう

    現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像Aと同じくクリッカブルマップを使っている画像Bを上下に隙間なく並べようとすると数pxほど隙間が開いてしまいます。 単なる画像データを上下に並べた時にはぴったりとくっついていたので、マージンやパディングの設定がおかしい訳ではないだろうと思っているのですが、これはクリッカブルマップを追加した事によって何か追加でスタイルシートを設定してあげなければいけないのでしょうか? それとも、クリッカブルマップを使った時はどうしても隙間を埋める事ができないのでしょうか? 1つの画像でやればいいのですが、HPのデザイン上・管理上の都合(画像データの差し替え頻度)どうしても分けて使いたいと思っています。 ご回答お願いします。 該当部分のHTMLソースです。 <img src="top.jpg" alt="ようこそ" usemap="#map1" width="600" height="200" /> <map name="map1"> <area shape="rect" coords="0,0,200,200" href="auto.html" /> </map> <img src="top.jpg" alt="ようこそ" usemap="#map2" width="600" height="200" /> <map name="map2"> <area shape="rect" coords="400,0,600,200" href="auto.html" /> </map>

    • ベストアンサー
    • HTML