<JavaScript>Javascriptで画像を動的に切り替え

プログラミング(JavaScript)

JavaScriptです

 

やること

・ボタンを押されたら画像を切り替える

 

要件

・フロントで動かす

・画像の情報が変わっても対応が簡単になるように

・ボタンをクリックしたことをトリガーにして

 

っていうのを作りました。

 

使用したソースコード


            <img id="img" style="height: 300px; width: 300px;" alt="hoge" >
            <a name="yasai.jpg" class="samp" onclick="changeimg(0)">hoge<a>
            <a name="hoge.png" class="samp" onclick="changeimg(1)">hoge<a>
            <script type="text/javascript">
                  
                    var changeimg=function(hoge) {
                    //ボタン上の要素を全て取得
                    var a = document.getElementsByClassName('samp');
                    //imgの状態を取得
                    var img = document.getElementById('img');
                    //imgの画像を指定(変更)
                    img.setAttribute("src", a[hoge].name);
                }
               
            </script>

//はてな記法使ってハイライトしようと思ったら編集画面の切り替えができなくて断念しました

 

このコードでやってることの説明

var a = document.getElementsByClassName('samp');

 aにsampクラスのelementの内容を全て格納 

var img = document.getElementById('img');

imgにidがimgのelementの内容を全て格納

img.setAttribute("src", a[hoge].name);

imgタグのsrc情報を書き換える(この時はaタグのhoge番目のname要素に)

 

以上　メモ