I need help implementing a feature on my website where users can change an image by selecting radio buttons. For example, there are three options:
1) Fox 2) Cat 3) Dog
When the user chooses "Fox," I want an image of a fox to be displayed. If they then switch to "Cat," I want the fox image to transition into a cat image. I have seen examples of changing background colors with radio buttons, but not images.
Example of Background Color Change: 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 assistance would be greatly appreciated.
Thank you