Button To Change Image (almost solved!)

  • I’m looking at creating a page where I have 1 image displayed on the left and a couple of buttons on the right to which when clicked change the image on the left.

    I’m using WordPress with Divi, but that’s not too important.

    Here is a code I’ve got working from an old post I found but cannot get quite right! Ideally working with columns.. image on left, buttons on the right.

    Tryit Editor v3.7 (w3schools.com)

    <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, initial-scale=1.0">

<style> img{ height: 880px; width: 400px; } .btn { color: white; background-color: grey; font-size: 20px; padding: 15px 24px; border-radius: 8px; border: none; margin-top: 20px; } .btn:focus { background-color: #f78900; color: white; } .btn:hover { background-color: #f78900; color: white; } </style>

<script> function BOSCASTLE(){ document.getElementById('myImage') .src="[https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled3.png](https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled3.png)"; } function SENNEN(){ document.getElementById('myImage') .src="[https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled2.png](https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled2.png)"; } function MOUSEHOLE(){ document.getElementById('myImage') .src="[https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled.png](https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled.png)"; } function ZENNOR(){ document.getElementById('myImage') .src="[https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled1.png](https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled1.png)"; } </script>

</head>

<body>

<div class="container">

<img id="myImage"

src="https://cornwallstairs.co.uk/wp-content/uploads/2022/03/untitled3.png" >

</div>

<div class="button">

<button class="btn"

onclick=BOSCASTLE();>

BOSCASTLE

</button>

<button class="btn"

onclick=SENNEN();>

SENNEN

</button>

<button class="btn"

onclick=MOUSEHOLE();>

MOUSEHOLE

</button>

<button class="btn"

onclick=ZENNOR();>

ZENNOR

</button>

</div>

</body>

</html>

    I don’t know if there is a wordpress plugin or anything available to make it easier?

    Thanks in advance.

Viewing 1 replies (of 1 total)

  • It will be easy if you could create the page on a wordpress website and then create 2 columns layout, but the image on the left side and buttons on the right side, give the image container an ID, then give unique ids to all the button and same class to all the button.

    then we can easily provide you jQuery code to add on the website that will change the images on a button click.

Viewing 1 replies (of 1 total)
  • The topic ‘Button To Change Image (almost solved!)’ is closed to new replies.