Javascript : affichier une image suite à un

Fermé
Fox54270 - 14 févr. 2012 à 06:43
 Joe - 14 févr. 2012 à 11:38
Bonjour Tout le monde,

J'aurais besoin de votre aidepour resoudre se probléme :

je dispose d'une liste de choix sous forme de bouton radio dont voici le code :

<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: 150px;">Faite votre choix</label>
<div class="float_left">
<input value="Naissance" title="Merci de faire votre choix" class="radio validate-one-required" id="radio00" name="radio0" type="radio" />
<label for="radio00" class="radio_label">Naissance</label>
<input value="Mariage" title="Merci de faire votre choix" class="radio validate-one-required" id="radio01" name="radio0" type="radio" />
<label for="radio01" class="radio_label">Mariage</label>
<input value="Anniversaire" title="Merci de faire votre choix" class="radio validate-one-required" id="radio02" name="radio0" type="radio" />
<label for="radio02" class="radio_label">Anniversaire</label>
<br />
<input value="Fiançailles" title="Merci de faire votre choix" class="radio validate-one-required" id="radio03" name="radio0" type="radio" />
<label for="radio03" class="radio_label">Fiançailles</label>
<input value="Ann. de mariage" title="Merci de faire votre choix" class="radio validate-one-required" id="radio04" name="radio0" type="radio" />
<label for="radio04" class="radio_label">Ann. de mariage</label>
<input value="Déclaration" title="Merci de faire votre choix" class="radio validate-one-required" id="radio05" name="radio0" type="radio" />
<label for="radio05" class="radio_label">Déclaration</label>
<br />
</div>
</div>
<div class="cfclear"> </div>
</div>

Je souhaite faire en sorte que l'orsqu'on choisi une option une image qui correspond a cette option s'affiche dans un div

Pouvez-vous me dire comment faire SVP

Merci
A voir également:

1 réponse

Tu peux faire quelque chose comme ça :

<script>
function changeImg1(valeur)
{
if ( valeur == 1 )
document.getElementById('img1').innerHTML="<img src='naissance.png'>";
if ( valeur == 2 )
document.getElementById('img1').innerHTML="<img src='mariage.png'>";
if ( valeur == 3 )
document.getElementById('img1').innerHTML="<img src='anniversaire.png'>";

}
</script>

<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: 150px;">Faite votre choix</label>
<div class="float_left">
<input value="Naissance" title="Merci de faire votre choix" class="radio validate-one-required" id="radio00" name="radio0" type="radio" onclick="changeImg1(1);"/>
<label for="radio00" class="radio_label">Naissance</label>
<input value="Mariage" title="Merci de faire votre choix" class="radio validate-one-required" id="radio01" name="radio0" type="radio" onclick="changeImg1(2);"/>
<label for="radio01" class="radio_label">Mariage</label>
<input value="Anniversaire" title="Merci de faire votre choix" class="radio validate-one-required" id="radio02" name="radio0" type="radio" onclick="changeImg1(3);"/>
<label for="radio02" class="radio_label">Anniversaire</label>
<div id="img1"></div>
<br />
<input value="Fiançailles" title="Merci de faire votre choix" class="radio validate-one-required" id="radio03" name="radio0" type="radio" />
<label for="radio03" class="radio_label">Fiançailles</label>
<input value="Ann. de mariage" title="Merci de faire votre choix" class="radio validate-one-required" id="radio04" name="radio0" type="radio" />
<label for="radio04" class="radio_label">Ann. de mariage</label>
<input value="Déclaration" title="Merci de faire votre choix" class="radio validate-one-required" id="radio05" name="radio0" type="radio" />
<label for="radio05" class="radio_label">Déclaration</label>
<div id="img2"></div>
<br />
</div>
</div>
<div class="cfclear"> </div>
</div>
1