- ベストアンサー
クリッカブルマップの一部分を消す方法
- クリッカブルマップの一部分を消す方法について教えてください。透過PNGの画像を重ね合わせ、レイヤーのように表示した状態で、各画像の透明部分以外のオンクリックで画像を入れ替え、上の階層の画像を消して下の階層の画像のオンクリックでも画像を入れ替えたいですが、うまくいきません。
- 現在、四角PNGと丸PNG、透明PNGを重ね合わせている状態で、それぞれのクリッカブルマップを重ねて持たせています。丸を非表示にする際に、丸のクリッカブルマップだけを消すことができず、丸があったところだけクリックが効かなくなってしまいます。根本的なやり方がまずいのでしょうか？
- 質問文章では、クリッカブルマップの一部分を消す方法についての問題があります。透過PNGの画像を重ね合わせて、各画像の透明部分以外のオンクリックで画像を入れ替え、上の階層の画像を消して下の階層の画像のオンクリックでも画像を入れ替えたいですが、うまくいきません。具体的な問題としては、丸を非表示にする際に、丸のクリッカブルマップだけを消すことができず、丸があったところだけクリックが効かなくなってしまい、根本的なやり方がまずいのかどうかを知りたいです。
- MZK54
- お礼率30% (7/23)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （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とマップの定義順などをコントロールしてやる必要がありますね。
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
No1です クリッカブルマップの書き換えは可能だったと思いますが、少々面倒そうな気がします。（座標がcsvみたいな記述だったかな？よく覚えていない。） 今回のご質問の場合は、その面倒さにトライしなくても、画像を表示/非表示するのですから、そちらの画像の方にクリックイベントもセットで定義しておく案の方が簡単ではないかというのが、No1の回答の意図です。 そうすれば、クリッカブルマップを書き換えなくても、画像を表示/非表示するだけで、（自動的に）クリック用のマッピングも切り替えることができますし、例えば、表示する画像の位置を移動させたりしても、マップを変更する必要はなくなりますよね。 要は、マップと画像を分けるようなことはせずに（クリッカブルマップはそうですが）、画像とマップを一致させておくことで、処理が簡単になるのではということをいいたかっただけ。 どうしてもマップの書き換えを行いたければ、DOMで選択してcoordsを取ればよいのだけれど、座標が配列ではなくてcsvのようなデータになっていたと記憶しています。（記憶が曖昧なので、違うかも）
補足
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> これを解消するためにはどのようにするのが良いのでしょうか？ お手数をおかけしますがよろしくお願いします。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
id="map2"は常に表示させた状態（クリックできる状態）にしておき、 （document.getElementById('map2').style.display='none'; を削除) クリックされたときに、 layer2の状態を判断して、layer2.style.displayを表示したり非表示にするような動作をしてみてはいかがでしょうか。 if(document.layer2.style.display=='none'){ // ここにlayer2が消えてるときの動作を記述 }else{ // ここにlayer2が表示されているときの動作を記述 }
補足
返事が遅くなり申し訳ありません。ご回答ありがとうございます。 たしかにこれは一つの解決方法ですね。 map2に割り当てられた動作を、その下にあるmap1の動作に切り替えてみたらできました。 ただこの方法だとクリッカブルマップで指定したAREAの一部を消すことにはなっていないので、根本的な解決になっておらず、数百枚の画像を重ねて行う場合にはかなり複雑になってしまう気がします。 AREAで指定した範囲は、javascriptでは消す方法はないのでしょうか？
- fujillin
- ベストアンサー率61% (1594/2576)
四角と丸の画像が別にあるのなら透明画像にマップを設定する必要はないのでは？ 四角はそのままアンカーまたはonclickイベントでも良いし。 丸の画像だけにクリッカブルマップを設定しておけば良いのでは？ そうしておけば、画像を非表示にするだけで、クリックイベントも発生しなくなると思うけど… 試してはいないので、確認してみてください。
補足
ご回答ありがとうございます。 少し説明が足りなかったです。 実際には、数百枚の背景が透明なPNGを重ねて一枚の絵にし、各PNGを出したり消したりしたいと思っています。 そして現在表示されている絵をクリックすると、該当PNGの色が変わればいいなあと。 上記の四角と丸の例では、分かりやすくするために単純化しています。 ２枚でできれば数百枚あってもできるだろうと思いまして。。 ですので、透明画像を使う方法でなくてもいいのですが、クリッカブルマップの一部が消せる必要があるのです。 お手数おかけしますが、解決方法お分かりになりますでしょうか？
お礼
おおお！できました！ Nodeを使えばできるようになるんですね。大変勉強になりました。 コードまで書いていただき感激です。 大変助かりました。ありがとうございました。