Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

OnClick On Text words Change Image

Hello all,
I have found this bit of code online that is almost what I want but I can't fathom how to sort it in to something to use.
Everything shows to click the image but not other text.

Code:
<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>

My web page will have a lot of text then towards the bottom it will need to display an image (a graph in fact as a .gif)
In my image folder there will be the following three image files.
cardiff.gif
manchester.gif
both.gif


So loosely there will be the three words on one line and under it there will be the imag.
Cardiff | Manchester | Both
IMAGE HERE

If Cardiff is clicked then cardiff.gif shows, When Manchester is clicked then manchester.gif ... well you get the idea.

How can I do this please?
Also if it is possible when clicked the caption is changed ?

Thanks in advance for any help you can give.
 
Use elememt.addEventListener and "click" or just use onclick attribute in HTML and have src of image set to proper image file path and use ID to get image and get text and with that to set textContent if you are using a text field. You may use a function(event)... with event with x and y to do this if it is one image with all those options. If you are using just an image for text in like your graph, you may need to change that image too.
X E.
 
There have been times and will be again when I write out solutions and not code, but you all have to agree that one line of code is better than a thousand words. So here is 52,000 words in a simple code fragment. And if you have questions which I know you will have, ask me here and I'll explain.
 
<div >
<img id ="imageOne" src ="10.jpg">
<p>
<span id="card"class="image">Cardiff </span>
<span id="man" class="image">Manchester </span>
<span id="both"class="image">Both </span>
</p>
</div>
 
JavaScript
var elements = document.getElementsByClassName("image");

for (i=0; i<elements.length; i++){
elements.addEventListener("click", function () {
var attr = this.getAttribute("id");
switch (attr) {
case "card":
document.getElementById("imageOne").src = "cardiff.gif";
break;
case "man":
document.getElementById("imageOne").src = "manchester.gif";
break;
case "both":
document.getElementById("imageOne").src = "both.gif";
break;
default:
break;
}
});
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom