• I need to show different images when different buttons are pressed. When you click on the button, the images below change.

    button 1 button 2 button … button 36

    [and here will be displayed a group of images that change when different buttons are pressed]

    I would like to know if its possible without complex code.

    Thank you

    • This topic was modified 1 year, 5 months ago by marcosgeria.
    • This topic was modified 1 year, 5 months ago by marcosgeria.
    • This topic was modified 1 year, 5 months ago by marcosgeria.
    • This topic was modified 1 year, 5 months ago by marcosgeria.
    • This topic was modified 1 year, 5 months ago by marcosgeria.
Viewing 1 replies (of 1 total)
  • Hi @marcosgeria

    This problem is not related with WordPress. It is a regular problem for the frontend.

    You need to use JavaScript. When a button is clicked, you need to hide all the images and show only the images you want to display. Adapt the next code to your problem.

    <!DOCTYPE html>
    <html>
    <script>
        function showImage( image ) {
            document.getElementById( 'image-1' ).style.display = "none";
            document.getElementById( 'image-2' ).style.display = "none";
            document.getElementById( image ).style.display = "inherit";
        }
    </script>
    <body>
        <a href="#" id="button-1" onClick="showImage('image-1')">Button 1</a>
        <a href="#" id="button-2" onClick="showImage('image-2')">Button 2</a>
        <img src="./image1.jpg" id="image-1" style="display:none">
        <img src="./image2.jpg" id="image-2" style="display:none">
    </body>
    </html>
Viewing 1 replies (of 1 total)
  • The topic ‘Block interaction’ is closed to new replies.