CODEWITHSUNDEEP
javascripthtmlcsscolorsradio-button
Hamodey_
Hamodey_

Reputation: 86

Change Image(s) through Radio Buttons, that the user can choose

I am looking to be able to change an Image with Radio buttons in my website; for example there are Radio buttons with 3 Options:

1) Fox 2) Cat 3) Dog

If the user chooses the Fox, I want an image of a fox to appear, and if after this has appeared, they change their option to Cat, I want the Fox image to change into the Cat image. I have an example of changing colours with background, but NOT images.

Background Colour changing example: http://jsfiddle.net/6jt8h/

HTML Code: 

    <div id= "genre">
What do you bust a move to?
<br>
<br>
<form name="music" method="post" action="">
<p>
<input type="radio" name="music" value="radio" onClick="changeColour('b')">Blues
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('r')">Rock
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('p')">Pop
<br>
</form>
</div>

Java Scipt:

    window.changeColour = function(value)
{
    alert(value);
    var color = document.body.style.backgroundColor;
    switch(value)
    {
        case 'b':
            color = "#FF0000";
        break;
        case 'r':
            color = "#0000FF";
        break;
        case 'p':
            color = "#FF00FF";
        break;
    }
    document.body.style.backgroundColor = color;
}

Any help at all is appreciated.

Thanks

Upvotes: 0

Views: 51

Answers (1)

Sebastian
Sebastian

Reputation: 1722

I updated your fiddle to fit your needs: see here

The JS Code:

window.changeImage = function(value)
{
    var imageSrc;
    switch(value)
    {
        case 'fox':
            imageSrc = "https://upload.wikimedia.org/wikipedia/commons/7/70/Rotfuchsdue.jpg";
        break;
        case 'dog':
            imageSrc = "https://upload.wikimedia.org/wikipedia/commons/f/f4/Sennenhund.jpg";
        break;
        case 'cat':
            imageSrc = "https://upload.wikimedia.org/wikipedia/commons/7/7b/Gr%C3%BCne_Augen_einer_Katze.JPG";
        break;
    }
    document.getElementById("myImage").src=imageSrc;
}

Upvotes: 2

Related Questions