![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
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()" />
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とマップの定義順などをコントロールしてやる必要がありますね。
おおお!できました!
Nodeを使えばできるようになるんですね。大変勉強になりました。
コードまで書いていただき感激です。
大変助かりました。ありがとうございました。
No.3
- 回答日時:
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>
これを解消するためにはどのようにするのが良いのでしょうか?
お手数をおかけしますがよろしくお願いします。
No.2
- 回答日時:
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では消す方法はないのでしょうか?
No.1
- 回答日時:
四角と丸の画像が別にあるのなら透明画像にマップを設定する必要はないのでは?
四角はそのままアンカーまたはonclickイベントでも良いし。
丸の画像だけにクリッカブルマップを設定しておけば良いのでは?
そうしておけば、画像を非表示にするだけで、クリックイベントも発生しなくなると思うけど…
試してはいないので、確認してみてください。
この回答への補足
ご回答ありがとうございます。
少し説明が足りなかったです。
実際には、数百枚の背景が透明なPNGを重ねて一枚の絵にし、各PNGを出したり消したりしたいと思っています。
そして現在表示されている絵をクリックすると、該当PNGの色が変わればいいなあと。
上記の四角と丸の例では、分かりやすくするために単純化しています。
2枚でできれば数百枚あってもできるだろうと思いまして。。
ですので、透明画像を使う方法でなくてもいいのですが、クリッカブルマップの一部が消せる必要があるのです。
お手数おかけしますが、解決方法お分かりになりますでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
image.onload = .. の後に imag...
-
<table>、もしくは<iframe>内で...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
マウスに画像がついてくる
-
「画像の上を流れる文字列」を...
-
js ロールオーバー??
-
残像を残しながらjpg画像を自動...
-
【スマホ】画像ボタンを押した...
-
初心者です。クリッカブルマッ...
-
prettyphotoの画像表示について
-
Javascriptで指定した日付と時...
-
jQueryでマウスオーバー画像変...
-
jspでcssが読み込めない
-
MAX関数を使ってからLEFT JOIN...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
JSPでの画像ファイル表示
-
Slick.jsのオプションrtlについて
-
jqueryのsortableで一部ソート...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
画像ランダム表示、しかしダブ...
-
bxsliderにて読み込み後に内容...
-
画像を切り替えランダム表示
-
1枚の画像をクリックすると複数...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
小窓について教えて下さい。
-
スライダーを実装した場合、ペ...
-
スワップイメージが上手く動作...
-
USEMAPでの指定区域にマウスオ...
-
1枚の画像をクリックして複数の...
-
クリッカブルマップの一部分だ...
-
オンマウスで、画像切り替え+...
-
iframe内のリンク文字のマウス...
-
edgeでスクロールバーに色が表...
-
画像の上に画像リンクを貼る方法
-
prettyphotoの画像表示について
おすすめ情報