Simple Gallery

Task

Create a program that allows the user to change the background image of an element with a button click.

 

NOTE: this task introduces the “onclick” event listener.

Solution

Show Animal 1
Show Animal 2
Reset

This one is a little different, you must setup your folders and place the images inside. Add the CSS styling to the html viewer, use onClick on the buttons to swap the images.

Show Code

Code

<button onclick=”document.getElementById(‘myImage’).src=’/wp-content/themes/shmu-base-min%20v1/assets/img/dooniesfarm-one.jpg'”>Show Animal 1</button>

<button onclick=”document.getElementById(‘myImage’).src=’/wp-content/themes/shmu-base-min%20v1/assets/img/dooniesfarm-two.jpg'”>Show Animal 2</button>

<button onclick=”document.getElementById(‘myImage’).src=’/wp-content/themes/shmu-base-min%20v1/assets/img/dooniesfarm-default.jpg'”>Reset</button>

Note: the file path will vary upon environment!