📂プログラミング

JavaScriptで複数画像のトグル機能を実装する例

ショーケース

A B C D

トグルは二つ以上の状態またはオプションの間を切り替える機能を指す¹. 上の例ではボタンを押すと画像が次のように変わることが分かる:

• A: ピカチュウ
• B: フシギダネ
• C: ヒトカゲ
• D: ゼニガメ

コード

HTML

<button onclick="toggle_A()">A</button>
<button onclick="toggle_B()">B</button>
<button onclick="toggle_C()">C</button>
<button onclick="toggle_D()">D</button>

<img id="img" src="A.webp" width="280px" frameborder="0"></img>

• button onclick="toggle_*()": ボタンに反応するJavaScript関数を指定する。
• img id="img" src="A.webp": JavaScriptによって変更される画像のidを指定する。ここでsrc="A.webp"は何も選択されていないときにA.webpをデフォルト画像として使うという意味だ。

javascript

<script>
function toggle_A() {document.getElementById("img").src = "A.webp";}
function toggle_B() {document.getElementById("img").src = "B.webp";}
function toggle_C() {document.getElementById("img").src = "C.webp";}
function toggle_D() {document.getElementById("img").src = "D.webp";}
</script>

• getElementById("img").src = "A.webp": idが “img” の要素のsrc属性を “A.webp” に変更する。つまり、ボタンをクリックすると画像が対応するファイルに変わる。