<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要素に)
以上 メモ