Change an image on clicking on a text word

Lensmeister · February 1, 2023

Hoping someone can help me with this.

The basis is a single webpage that has a fair amount of text on it but also has a feature thus:
One line of three words: Cardiff | Manchester | Both

Below is an image: Initially when the page loads it will have the cardiff.gif

Then when Manchester is clicked the cardiff disappears and the manchester.gif appears in the same place. Same for when the Both word is clicked.

I just need something simple/

I sourced this from the net

html>
    <body>

        <img id ="imageOne" src ="circleRed.png" onclick = "changeColor()"/>

        <script>
            var image =  document.getElementById("imageOne");

            function changeColor()
            {
                if (image.getAttribute('src') == "circleRed.png")
                {
                    image.src = "circleBlue.png";
                }
                else
                {
                    image.src = "circleRed.png";
                }
            }
        </script>
    </body>
</html>

This is for clicking an image. to change things.

I tried to edit for my needs but It just isn't working. I don't have a lot of experience with javascript or css.

All help is gratefully received.

Thanks in advance,

administrator · February 2, 2023

Look into doing this with CSS. Much easier.

Sign In

Change an image on clicking on a text word

Recommended Posts

Lensmeister

administrator

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Store

Support