javascript radiobutton
Mijn code:
<input type="radio" name="theme" value="blauw"> Blauw<br>
<input type="radio" name="theme" value="rood"> Rood<br>
Mijn plaatjes:
blauw.png
rood.png
Als je op blauw klikt moet het plaatje blauw.png komen en als je op rood drukt moet rood.png komen. Wie heeft zo`n simpel voor me?
Code (php)
1
2
3
2
3
<img src="blauw.png" id="plaatje" />
<input type="radio" onclick="document.getElementById('plaatje').src='blauw.png' selected/>
<input type="radio" onclick="document.getElementById('plaatje').src='rood.png' />
<input type="radio" onclick="document.getElementById('plaatje').src='blauw.png' selected/>
<input type="radio" onclick="document.getElementById('plaatje').src='rood.png' />
Het is overigens aan te raden om hier een javascript functie voor te schrijven, maar dit geeft in ieder geval de richting aan waarin je het moet zoeken...
Ik heb nu radio buttons EN een select box:
<select name="skill">
<option value="Cooking">Cooking</option>
<option value="Attack">Attack</option>
</select>
<input type="radio" name="theme" value="1" />
<input type="radio" name="theme" value="2" />
<img src="plaatje.php?skill=<hier moet de skill>&theme=<Hier moet de theme>">
Wat betreft het combineren van die 2. Je kunt een javascript functie maken, en die aanroept bij het klikken op de radiobuttons of het veranderen van de selectbox. Binnen die functie kun je de waardes uitlezen, en het plaatje aanpassen.
Heb je zelf al gezocht op internet naar tutorials of scripts die dit doen? Of naar javascript dingen? Het lijkt me een goed plan om je hier in ieder geval wat verder in te verdiepen...
Je zou het op deze manier op kunnen lossen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
var skill = "cooking";
var theme = 1;
function changeImage(type, value)
{
if (type == "skill")
{
skill = value;
}
else if (type == "theme")
{
theme = value;
}
var plaatje = "plaatje.php?skill=" + skill + "&theme=" + theme;
document.getElementById("plaatje").src = plaatje;
}
</script>
<select name="skill" onchange="changeImage('skill', this.value)">
<option value="Cooking">Cooking</option>
<option value="Attack">Attack</option>
</select>
<input type="radio" name="theme" value="1" onclick="changeImage('theme', this.value)" />
<input type="radio" name="theme" value="2" onclick="changeImage('theme', this.value)" />
<img src="plaatje.php?skill=cooking&theme=1" id="plaatje" />
var skill = "cooking";
var theme = 1;
function changeImage(type, value)
{
if (type == "skill")
{
skill = value;
}
else if (type == "theme")
{
theme = value;
}
var plaatje = "plaatje.php?skill=" + skill + "&theme=" + theme;
document.getElementById("plaatje").src = plaatje;
}
</script>
<select name="skill" onchange="changeImage('skill', this.value)">
<option value="Cooking">Cooking</option>
<option value="Attack">Attack</option>
</select>
<input type="radio" name="theme" value="1" onclick="changeImage('theme', this.value)" />
<input type="radio" name="theme" value="2" onclick="changeImage('theme', this.value)" />
<img src="plaatje.php?skill=cooking&theme=1" id="plaatje" />
Maar er zijn inderdaad meer manieren... Speel er eens wat mee zou ik zeggen ;-)