Javascript : affichier une image suite à un
Fox54270
-
Joe -
Joe -
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
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
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>
