※ボタンと要素が独立しているので今のままでは起動しません。
まず下記のコードについてですが、
cssのpositionを使い、divで囲んでいる3つの要素を重ねています。
それぞれ 「inu」「neko」「tori」と言うidが付いていると思います。
今回表示の切り替えを行いたい部分と言うのは、この3つの要素のことです。
(重なりが分かるように、3つの要素に500pxの背景画像を設定しています)
そしてボタンが3つあると思いますが、表示の切り替えにあたってこれらを起動ボタンとして使用したいと考えています。
例えば、今の状態だとdivのinuコンテンツが最背面にあります。そこで「inuが最前面」のボタンをクリックすると、そのコンテンツが最前面に表示されるということです。
すべて表示されているが重なっていて後ろの要素が見えない状態、そこでボタンをクリックすると、該当するdiv要素が最前面に来るという仕組みにしたいです。
このような仕組みを<button>に適用させるにはどのようなjavascriptが適切でしょうか?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #pet { position:relative; height: 500px; width: 500px; } .doubutu { position:absolute; left:0; top:0; } #inu { background-image: url("inu.png"); height: 500px; width: 500px; } #neko { background-image: url("neko.png"); height: 500px; width: 500px; } #tori { background-image: url("tori.png"); height: 500px; width: 500px; } p { padding-left: 10px; } </style> </head> <body> <button>inuが最前面に</button> <button>nekoが最前面に</button> <button>toriが最前面に</button> <div id="pet"> <duv id="inu" class="doubutu"> <p>※仮<br> コンテンツinuのエリア:縦横共に500px。<br> テキストや画像など入る予定。<br> 背景画像はcss上の、inu.pngにあたる。<br> 初期位置は一番下。</p> </duv> <div id="neko" class="doubutu"> <p>※仮<br> コンテンツnekoのエリア:縦横共に500px。<br> テキストや画像など入る予定。<br> 背景画像はcss上の、neko.pngにあたる。<br> 初期位置は中。</p> </div> <div id="tori" class="doubutu"> <p>※仮<br> コンテンツtoriのエリア:縦横共に500px。<br> テキストや画像など入る予定。<br> 背景画像はcss上の、tori.pngにあたる。<br> 初期位置は一番上。</p> </div> </div> </body> </html>
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/05 01:59