Question

我希望能够在我的网站上更改带有单选按钮的图像;例如，有3个选项的单选按钮：

1）狐狸 2）猫 3）狗

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

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

任何帮助都表示赞赏。

谢谢

Answer 1

我根据您的需求更新了您的小提琴：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;
}

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

1 个答案: