画像の重ね合わせ順序変更(zIndex)
<html> <head> <title>画像の重ね合わせ順序変更</title> <script language="javascript"> <!-- function change(n) { if(n == 1) { img1.style.zIndex = 3 img2.style.zIndex = 1 img3.style.zIndex = 2 } else if(n == 2) { img1.style.zIndex = 1 img2.style.zIndex = 3 img3.style.zIndex = 2 } else if(n == 3) { img1.style.zIndex = 1 img2.style.zIndex = 2 img3.style.zIndex = 3 } } //--> </script> <style type="text/css"> <!-- #img1 { position: absolute; z-index: 0; top: 50px; left: 50px; border: 2px #f00 solid; } #img2 { position: absolute; z-index: 1; top: 100px; left: 100px; border: 2px #f00 solid; } #img3 { position: absolute; z-index: 2; top: 150px; left: 150px; border: 2px #f00 solid; } //--> </style> </head> <body> <p>画像をクリックすると前面に来ます。</p> <img src="../../sample/img/img.jpg" id="img1" alt="画像1" onclick="change(1)"> <img src="../../sample/img/img.jpg" id="img2" alt="画像2" onclick="change(2)"> <img src="../../sample/img/img.jpg" id="img3" alt="画像3" onclick="change(3)"> </body> </html>
〔 実行する 〕