クリッカブルマップの一部分を消す方法

前へ 次へ
このQ&Aのポイント
  • クリッカブルマップの一部分を消す方法について教えてください。透過PNGの画像を重ね合わせ、レイヤーのように表示した状態で、各画像の透明部分以外のオンクリックで画像を入れ替え、上の階層の画像を消して下の階層の画像のオンクリックでも画像を入れ替えたいですが、うまくいきません。
  • 現在、四角PNGと丸PNG、透明PNGを重ね合わせている状態で、それぞれのクリッカブルマップを重ねて持たせています。丸を非表示にする際に、丸のクリッカブルマップだけを消すことができず、丸があったところだけクリックが効かなくなってしまいます。根本的なやり方がまずいのでしょうか？
  • 質問文章では、クリッカブルマップの一部分を消す方法についての問題があります。透過PNGの画像を重ね合わせて、各画像の透明部分以外のオンクリックで画像を入れ替え、上の階層の画像を消して下の階層の画像のオンクリックでも画像を入れ替えたいですが、うまくいきません。具体的な問題としては、丸を非表示にする際に、丸のクリッカブルマップだけを消すことができず、丸があったところだけクリックが効かなくなってしまい、根本的なやり方がまずいのかどうかを知りたいです。
回答を見る
  • ベストアンサー

クリッカブルマップの一部分だけを消す方法を教えて下さい！

javascript初心者です。 やりたいことは、下記の通りなのですが、どなたか対処方法を教えて頂けないでしょうか？ 透過PNGの画像を重ね合わせ、レイヤーのように表示した状態で、各画像の透明部分以外のオンクリックで画像を入れ替え、さらに上の階層の画像を消して下の階層の画像のオンクリックでも画像を入れ替えたいのですが、上手くいきません。。 たとえば、余白部分が透明な丸と四角のPNGを、丸が上になるように重ね、丸をクリックすると丸の色だけが、四角をクリックすると四角の色だけが変わり、さらに丸を非表示にして下の四角をクリックしすると、四角の色が変わるようにしたいのです。 四角PNG + 丸PNG + 透明PNGを重ね合わせ、透明PNGに丸と四角のクリッカブルマップを重ねて持たせることで、両方見えた状態でそれぞれの色を変えることはできたのですが、丸を非表示にする時に丸のクリッカブルマップだけを消すことができず、丸があったところだけクリックが効かなくなってしまいます。 根本的なやり方がまずいのでしょうか？ よろしくお願いします。 ソース抜粋 <script type = "text/javascript"> <!-- function remove(){ document.layer2.style.display='none'; document.getElementById('map2').style.display='none'; } //--> </script> <map name="Map" id="Map"> <area name="map2" id="map2" shape="circle" coords="丸の座標" onClick="document.layer2.src='丸の画像2'" /> <area name="map1" id="map1" shape="rect" coords="四角の座標" onClick="document.layer1.src='四角の画像2'" /> </map> <div style="position:absolute;top:30px; left:0px"> <img src="四角の画像1" alt ="" name="layer1" id="layer1" /> </div> <div style="position:absolute;top:30px; left:0px"> <img src="丸の画像1" alt ="" name="layer2" id="layer2" /> </div> <div style="position:absolute;top:30px; left:0px"> <img src="透明な画像" alt ="" usemap="#Map" /> </div> <input type="button" value="丸消す" onClick="remove()" />

  • MZK54
  • お礼率30% (7/23)

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

No1、No3です。 実験してみましたら、仰る通り下の画像のonclickイベントが発生しませんね。 重なった図形の場合、両方のイベントが発生したような記憶があったので、まとはずれな回答をしてしまったようです。　大変失礼いたしました。 …ということで、再考いたしましたが、どうやら、最初のご質問の通りの方法のほうがよさそうですね。 画像を変える部分は問題なくできているようなので、画像を消して同時にマップを消す部分の例を… DOMでMapの<area>要素を削除しています。（coordsの座標を無効化することでもいけそうですが、きちんと確認していません。=コメントアウトしている部分。） とりあえず、クリックすると、その画像を消すと同時に対応するマップ（AREA要素）を削除するという例です。（番号で対応をとっています） マップを再度有効にする場合は、createElementなどで再作成する必要があります。 <html> <head> <style type="text/css"> #shape img { position:absolute; } #shape #layer0 { top:0; left:0; width:200px; height:200px; border:1px solid gray; } #shape #layer2 { top:30px; left:0px; } #shape #layer1 { top:50px; left:50px; } </style> <script type="text/javascript"> function test(n) { var e = document.getElementById('map' + n); e.parentNode.removeChild(e); //←AREA要素を削除 //e.coords='0,0';　//←座標定義を無効化 document.getElementById('layer' + n).style.display = 'none'; } </script> </head> <body> <map name="Map" id="Map"> <area id="map1" shape="circle" coords="125,125,75" onclick="test(1);" /> <area id="map2" shape="rect" coords="0,0,150,150" onclick="test(2);" /> </map> <div id="shape"> <img src="img/rect1.gif" alt ="" name="layer2" id="layer2" /> <img src="img/circle.gif" alt ="" name="layer1" id="layer1" /> <img src="img/rect2.gif" alt ="" name="layer0" id="layer0" usemap="#Map" /> </div> </body> </html> 画像の数が多くて、その重なり順が変わるような場合は、画像のz-indexとマップの定義順などをコントロールしてやる必要がありますね。

MZK54
質問者

お礼

おおお！できました！ Nodeを使えばできるようになるんですね。大変勉強になりました。 コードまで書いていただき感激です。 大変助かりました。ありがとうございました。

その他の回答 (3)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

No1です クリッカブルマップの書き換えは可能だったと思いますが、少々面倒そうな気がします。（座標がcsvみたいな記述だったかな？よく覚えていない。） 今回のご質問の場合は、その面倒さにトライしなくても、画像を表示/非表示するのですから、そちらの画像の方にクリックイベントもセットで定義しておく案の方が簡単ではないかというのが、No1の回答の意図です。 そうすれば、クリッカブルマップを書き換えなくても、画像を表示/非表示するだけで、（自動的に）クリック用のマッピングも切り替えることができますし、例えば、表示する画像の位置を移動させたりしても、マップを変更する必要はなくなりますよね。 要は、マップと画像を分けるようなことはせずに（クリッカブルマップはそうですが）、画像とマップを一致させておくことで、処理が簡単になるのではということをいいたかっただけ。 どうしてもマップの書き換えを行いたければ、DOMで選択してcoordsを取ればよいのだけれど、座標が配列ではなくてcsvのようなデータになっていたと記憶しています。（記憶が曖昧なので、違うかも）

MZK54
質問者

補足

fujillin様　重ね重ねありがとうございます。 マップを書き換える方法はあるにはあるのですね。やはりstyle.display="none"ではだめなんでしょうね。もう少しやり方を探してみます。 「表示/非表示する画像の方にクリックイベントもセットで定義しておく」ということは、各画像にマップを持たせるということですよね。 やり方が悪いのかもしれませんが、下記のコードの場合、PNGを重ねて表示した場合に、下の階層のPNGに触れなくなってしまいます。 （たとえば、四角が下、丸が上になるように重ねた場合、丸の透明部分が邪魔で下の四角のonClickが動かない） <map name="Map1" id="Map1"> <area shape="rect" coords="四角の座標" onClick="document.layer2.src='四角の画像2'” /> </map> <map name="Map2" id="Map2"> <area shape="circle" coords="丸の座標" onClick="document.layer2.src='丸の画像2'” /> </map> <div style="position:absolute;top:30px; left:0px"> <img src="四角の画像" alt ="" name="layer1" id="layer1" usemap="#Map1" /></div> <div style="position:absolute;top:30px; left:0px"> <img src="丸の画像" alt ="" name="layer2" id="layer2" usemap="#Map2" /></div> これを解消するためにはどのようにするのが良いのでしょうか？ お手数をおかけしますがよろしくお願いします。

回答No.2

id="map2"は常に表示させた状態（クリックできる状態）にしておき、 （document.getElementById('map2').style.display='none'; を削除) クリックされたときに、 layer2の状態を判断して、layer2.style.displayを表示したり非表示にするような動作をしてみてはいかがでしょうか。 if(document.layer2.style.display=='none'){ // ここにlayer2が消えてるときの動作を記述 }else{ // ここにlayer2が表示されているときの動作を記述 }

MZK54
質問者

補足

返事が遅くなり申し訳ありません。ご回答ありがとうございます。 たしかにこれは一つの解決方法ですね。 map2に割り当てられた動作を、その下にあるmap1の動作に切り替えてみたらできました。 ただこの方法だとクリッカブルマップで指定したAREAの一部を消すことにはなっていないので、根本的な解決になっておらず、数百枚の画像を重ねて行う場合にはかなり複雑になってしまう気がします。 AREAで指定した範囲は、javascriptでは消す方法はないのでしょうか？

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

四角と丸の画像が別にあるのなら透明画像にマップを設定する必要はないのでは？ 四角はそのままアンカーまたはonclickイベントでも良いし。 丸の画像だけにクリッカブルマップを設定しておけば良いのでは？ そうしておけば、画像を非表示にするだけで、クリックイベントも発生しなくなると思うけど… 試してはいないので、確認してみてください。

MZK54
質問者

補足

ご回答ありがとうございます。 少し説明が足りなかったです。 実際には、数百枚の背景が透明なPNGを重ねて一枚の絵にし、各PNGを出したり消したりしたいと思っています。 そして現在表示されている絵をクリックすると、該当PNGの色が変わればいいなあと。 上記の四角と丸の例では、分かりやすくするために単純化しています。 ２枚でできれば数百枚あってもできるだろうと思いまして。。 ですので、透明画像を使う方法でなくてもいいのですが、クリッカブルマップの一部が消せる必要があるのです。 お手数おかけしますが、解決方法お分かりになりますでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • クリッカブルマップについて

    私は、Macintoshを使って、ＨＰ製作をしているのですが、 クリッカブルマップが、MacのSafariではちゃんと出来ているのに、 internet explorerだと見れません。 どこが違うのでしょうか？ご回答お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- BODY{cursor:crosshair;} --> </style> <title>サンプル</title> </head> <body background="002.jpg"> <div style="top : 40px;left : 90px; position : absolute; z-index : 1; " id="Layer1"> <img src="window18.jpg"　usemap="#map1"　alt=""> <map name="map1"> <area shape="rect" coords="586,247,617,261" href="info.html" target="iframe"> <area shape="rect" coords="622,247,660,261" href="info.html" target="iframe"> <area shape="rect" coords="666,247,690,261" href="contact.html" target="iframe"> <area shape="rect" coords="582,276,626,291" href="cosme.html" target="iframe"> <area shape="rect" coords="631,276,663,290" href="kaimono2.html" target="iframe"> <area shape="rect" coords="667,276,698,290" href="link.html" target="iframe"> <area shape="default" nohref> </map> </div> <div style="top : 145px;left : 190px; position : absolute; z-index : 1; " id="Layer2"> <iframe src="migi.html" border="0px" width="450" height="280" scrolling="AUTO" name="iframe"> </iframe></div> </body> </html>

    • ベストアンサー
    • HTML
  • クリックでクリッカブルマップの色が変化する処理

    クリッカブルマップを使用して、特定の場所をクリックしたら色と場所が変化するようなものを作成したいと思っております。 過去の質問も参考にさせて頂いたのですが、思うように作動してくれないので、質問を立てさせて頂きました。 HTML JQueryコードを下記に記します。 <HTML> <div id="click"> <img src="../../Images/kousi2-0.png" usemap="#sikaku" width="400px" height="400px" alt="map" class="metermap"/> <map name="sikaku"> <area shape="rect" coords="19,22,89,91" alt="map1" id="clickmap1" /> <area shape="rect" coords="94,22,161,91" alt="map1" id="clickmap2" /> <area shape="rect" coords="166,22,235,91" alt="map1" id="clickmap3" /> </map> </div> <JQuery> //クリッカブルマップの切り替え処理 $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-1.png"); $("#click img").attr("src",onsrc); }); }); $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-2.png"); $("#click img").attr("src",onsrc); }); }); $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-3.png"); $("#click img").attr("src",onsrc); }); }); これで画像は切り替わるのですが、所定の場所に画像が移動してくれません。 今使用している格子の画像で説明すると、クリックで出現する赤の四角が、格子の左上から右下に移動してくれないといった感じです。 replaceで置き換えているだけなので、その場所しか切り替わらないのは当然ですが、 解決策が見えてきません。 有効なJQueryのライブラリなどございましたら、ご紹介頂けると幸いです。 よろしくお願いいたします。 ご教授のほど、よろしくお願いいたします。

  • 複数のfunctionをonclickで実行するには？

    こんばんは。 複数のfunctionを実行するにはどうしたらいいんでしょうか？ 後、追加でなんですが、areaにhref属性を使わず（#を指定すると、ページの上に戻ってしまうため）にポインタを指（リンクに乗せたときのやつです）にするにはどうすればいいんでしょうか？ インラインフレーム１ <script> <!-- function change１(picname) { parent.frames['インラインフレーム２'].document.getElementById("ＩＤ１").src = picname; } function change２(picname) { parent.frames['インラインフレーム２'].document.getElementById("ＩＤ２").src = picname; } ・・・ function change３(picname) { parent.frames['インラインフレーム２'].document.getElementById("ＩＤ８").src = picname; } //--> </script> 上のfunctionを複数実行したいんです。（全てではありません） <map name=""> <area shape="rect" coords="0,0,0,0" alt="" onclick="change１('ファイル')"> ・・・ <area shape="rect" coords="0,0,0,0" alt="" onclick="change８('ファイル')"> </map> インラインフレーム２ <div style="position: absolute; top: 0px; left: 0px; z-index: 0;"><img src="ファイル" id=ＩＤ１ alt="" border="0"></div> <div style="position: absolute; top: 0px; left: 0px; z-index: 1;"><img src="ファイル" id=ＩＤ２ alt="" border="0"></div> <div style="position: absolute; top: 0px; left: 0px; z-index: 2;"><img src="ファイル" id=ＩＤ３ alt="" border="0"></div> ・・・ <div style="position: absolute; top: 0px; left: 0px; z-index: 8;"><img src="ファイル" id=ＩＤ８="0"></div> どうでしょう？ 自分なりに試してみたんですが、成功しませんでした。（onclickにいっぱいくっつけたりとか・・・） どうかお願いします。

  • クリッカブルマップがきかない！？

    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
  • CSSのdivで、ページ全体をセンタリング出来ない

    質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。

  • onClickで画像を消し、下の部分を選択する方法

    javascript超初心者です。 どなたか、解決法を教えて頂けないでしょうか？ ●解決したい事 onClickで画像を消し、position: absolute;で画像の下に配置した<div>コンテンツ</div>の部分を選択できるようにしたいのですが、どうも選択できません。 IEでは選択できるのですが、chrome、firefox、safariでは画像が被っていた部分は選択できず、画像が被っていない部分しか選択できない状態になります。 IEでは出来るので、他のブラウザでも出来るのではないかと思ってしまいます。 何を変えればいいのでしょうか？ どうか宜しくお願いします。 ソース抜粋 <body> <span onClick="this.style.visibility='hidden'"><img src="画像" width="1080" height="800" /></span> <div id="wrapper" style="position:absolute; top:0px" width="1080" height="1500"> コンテンツ </div> </body> 上記のソースのwrapper下側700px部分しか選択できないのです。 どうか宜しくお願いします！ 　

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

    画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。 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番上の画像がロールオーバーされるという。。。 ジャバスクリプト初心者の私にはなぜだか全く分かりません。 他の方法（フラッシュなど）もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか？ どうぞよろしくお願いいたします。

  • cookie.jsを使ってクッキーを利用する方法。

    cookie.jsを使ってクッキーを利用する方法。 現在ジャバスクリプトにて、複数の画像、リンク、位置データがonClickで変わるように設定しています。 違うページに行き戻ると、置き換えられた画像のデータがなくなってしまいます。 cookie.jsを使えばいいと思い、その設定方法をいろいろと調べてみましたがわかりませんでした。 こういう場合は、ジャバスクリプトをどのように記入すれば良いのでしょうか。 よろしくお願いいたします。 <body> <a href="http://www.a01"> <img name="AAA" id="AAA" src="images/a01.jpg" style="position: absolute; top: 310px; left: 220px; z-index: 45;" border="0" /></a> <a href="http://www.b01"> <img name="BBB" id="BBB" src="images/b01.jpg" style="position: absolute; top: 227px; left: 363px; z-index: 120;" border="0" /></a> <a href="http://www.c01"> <img name="CCC" id="CCC" src="images/c01.jpg" style="position: absolute; top: 418px; left: 425px; z-index: 120;" border="0" /></a> <form> <input value="" title="clear" style="background: transparent url(images/clear.gif) no-repeat;" onclick="document.AAA.src='images/spacer.gif';document.links[0].href='#';" type="button" /> <div class="AAA"> <a href="#" class="prev_AAA">戻る</a> <a href="#" class="next_AAA">進む</a> <ul> <li> <input value="" title="" style="background: transparent url(images/a01.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a01.jpg';document.links[0].href='http://www.a01'" type="button" /> </li> <li> <input value="" title="" style="background: transparent url(images/a02.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a02.jpg';document.links[0].href='http://www.a02'" type="button" /> </li> </ul></div> ……………… </form></body>

  • 初心者です。クリッカブルマップonclickの後

    javascript初心者です。 クリッカブルマップにおいて指定area内をクリックすると 画像が差し替えになる状態です。 差し替え後の画像はarea範囲よりも大きい（マップ全体と同一サイズ）なのですが このarea座標外でクリックして、元画像に戻るようにしたいです。 現在は、area座標内をクリックしないと元画像に戻りません。 ■jabascript function circle01_over(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'ロールオーバー後の画像（元画像と同じサイズで一部だけ変えたもの）'; } function image_out(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = '元画像マップ'; } function circle01_click(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'クリック後の画像'; } ■html <img src="元画像" class="hover" alt="" width="XXX" height="XXX" usemap="#Map" id="元画像マップ" name="元画像マップ" /> <map name="Map" id="Map"> <area shape="circle" coords="***,***,***" href="javascript:void（0）;" onmouseover="circle01_over()" onmouseout="image_out()"" onclick="circle01_click(); return false;" alt="サンプル" /> 初歩的な事で申し訳ありません・・・ 尚、jQueryも新規リンク（html）も使用不可です。 添付画像のように動作させたいです。 宜しくお願い致します。

  • フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください

    フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください こんにちは、よろしくお願いします <HEAD> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> </HEAD> <FORM> <div id="default-open"> <a href="javascript:;" onclick="document.getElementById('default-close').style.display='block'; document.getElementById('default-open').style.display='none';"> オプションを追加する</a> </div> <div id="default-close" style="display: none;"> <a href="javascript:;" onclick="document.getElementById('default-open').style.display='block'; document.getElementById('default-close').style.display='none';"> 閉じる</a><br> <div id="map" style="width:300px; height:300px; margin-left: 0px; margin-top:0px;"> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.033333, 139.15), 8); } //]]> </script> </div> </FORM> 「オプションを追加する」をクリックしたら、javascriptで下側にgoogleマップAPIが現れるといったコンテンツを作っています マップの表示はできるのですが、中のマップの表示がどうしてもずれたような感じになってしまいます 灰色の帯のようなものがマップの周囲に出てきて、きちんと読み込まれて無いように見えます <div id="default-close">の外側に出すときちんと表示できるので、CSSで制御できないかと頑張ってみましたがうまくできません 上側の<div>タグで細工したのがずれる原因ではないかと思うのですが・・・ 誰かこの問題について分かる方はいないでしょうか

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する