画像の重なりの順序を代える方法を教えてください。

質問

画像の重なりの順序を代える方法を教えてください。

HTML <IMGで複数の画像を表示し、重なった部分があります。
INPUTボタンなどでJavaScriptを起動し、JavaScriptで背面にある画像を前面に表示
する方法を教えてください。

画像1：背面
画像2：前面
　　↓
ボタンAをクリック
　　↓
画像1：前面
画像2：背面
　　↓
ボタンBをクリック
　　↓
画像1：背面
画像2：前面

サンプルなどがあれば助かります。
よろしくお願いいたします。

回答No.1

yyr446 · ベストアンサー

要素のstyle属性のzIndex値を変えると重なりの順序が変わります。
(zIndex値が大きなものほど前面に表示されます。)

<img id="img1" src="img1.jpg" alt="画像1" style="z-index:200">
<img id="img2" src="img2.jpg" alt="画像2" style="z-index:100">
<button onclick="document.getElementById("img1").style.zIndex=document.getElementById("img2").style.zIndex+1;">ボタンA</button>
<button onclick="document.getElementById("img2").style.zIndex=document.getElementById("img1").style.zIndex+1;">ボタンB</button>

でどうでしょう

お礼

本当に助かりました
ばっちりうまくいきました。

ありがとうございます。