通过单选按钮更改图像，用户可以选择

Question

我希望能够在我的网站上使用单选按钮更改图片；例如有 3 个选项的单选按钮：

1) 狐狸 2) 猫 3) 狗

如果用户选择狐狸，我希望出现狐狸的图像，如果在出现之后，他们将选项更改为猫，我希望狐狸图像变为猫图像。我有一个改变背景颜色的例子，但不是图像。

HTML代码：

    <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 脚本：

    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;
}

感谢任何帮助。

谢谢

Answer 1

我更新了您的 fiddle 以满足您的需求：see here

JS代码：

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;
}

通过单选按钮更改图像，用户可以选择

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

html

javascript

css

colors

radio-button