Onclick faire disparaître les choix non selectionner

Résolu/Fermé
litipp - 28 nov. 2014 à 19:31
 litipp - 1 déc. 2014 à 20:57
Bonjour,


Bonjour,

J'ai un petit problème.

Quand je sélectionne mon image elle embarque par dessus l'autre et l'autre et ainsi de suite. J'aimerai que quand je sélectionne une image les autre ce désélectionne

Voici mon code:

<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>


<br />
<br />

<img src='images/flottant/EE-I-5388-St.-Croix-slider.png' style='margin-left:50px;margin-top:30px;' title=''/>
<img id="img_1" src='images/flottant/EE-I-5388-St.-Croix-slider.png' style='position:absolute;margin-left:-468px;margin-top:30px;display:none;' title=''/>
<img id="img_2" src='images/flottant/EE-I-5390-Trinidad-slider.png' style='position:absolute;margin-left:-468px;margin-top:30px;display:none;' title=''/>
<img id="img_3" src='images/flottant/EE-I-6652-Barbados-slider.png' style='position:absolute;margin-left:-468px;margin-top:30px;display:none;' title=''/>
<img id="img_4" src='images/flottant/EE-I-6653-Grenada-slider.png' style='position:absolute;margin-left:-468px;margin-top:30px;display:none;' title=''/>
<img id="img_5" src='images/flottant/EE-I-9741-Antiqua-slider.png' style='position:absolute;margin-left:-468px;margin-top:30px;display:none;' title=''/>
<img id="img_6" src='images/flottant/EE-I-9744-St.-Lucia-slider.png' style='position:absolute;margin-left:-468px;margin-top:30px;display:none;' title=''/>
<img id="img_7" src='images/flottant/EE-I-9745-Tortola-slider.png' style='position:absolute;margin-left:-468px;margin-top:30px;display:none;' title=''/>


<br />
<br />
<br />



<div style='border:solid;width:;text-align:center;margin:auto;text-align:center;'>
<a href="" onclick="javascript:visibilite('img_1');return false;"><img src='images/flottant/EE-I-5388-St.-Croix-thumb.png' title=''/></a>
<a href="" onclick="javascript:visibilite('img_2');return false;"><img src='images/flottant/EE-I-5390-Trinidad-thumb.png' title=''/></a>
<a href="" onclick="javascript:visibilite('img_3');return false;"><img src='images/flottant/EE-I-6652-Barbados-thumb.png' title=''/></a>
<a href="" onclick="javascript:visibilite('img_4');return false;"><img src='images/flottant/EE-I-6653-Grenada-thumb.png' title=''/></a>
<a href="" onclick="javascript:visibilite('img_5');return false;"><img src='images/flottant/EE-I-9741-Antiqua-thumb.png' title=''/></a>
<a href="" onclick="javascript:visibilite('img_6');return false;"><img src='images/flottant/EE-I-9744-St.-Lucia-thumb.png' title=''/></a>
<a href="" onclick="javascript:visibilite('img_7');return false;"><img src='images/flottant/EE-I-9745-Tortola-thumb.png' title=''/></a>
</div>

2 réponses

Ometeoltloque Messages postés 38 Date d'inscription jeudi 23 octobre 2014 Statut Membre Dernière intervention 10 décembre 2014 2
Modifié par Ometeoltloque le 28/11/2014 à 19:56
Bonjour,

J'ai bricolé un code source qui pourrait marcher. Il faudrait juste que tu rajoute une class pour toutes tes images :

function displayNone()
{
var images = document.getElementsByClassName("maClasse");
var i;
for (i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
}

À chaque appel de visibilite(thingId) tu appel également displayNone(), et ensuite tu affiche l'image voulue que tu connais grâce à son id passé en paramètre.
Si je ne suis pas clair, ça pourrais donner un truc du genre :

--------------------------
function displayNone()
{
var images = document.getElementsByClassName("maClasse");
var i;
for (i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
}
function visibilite(thingId)
{
displayNone();
document.getElementById(thingId).css.display = "inline|block|inline-block[...]";
}

-------------------------------
Évidemment, ce code est à adapter selon tes besoins



Ometeoltloque
0
Merci !!!

J'ai finalement résolue mon problème :)
0