Div cachée ?

Fermé
AnneMD - 4 avril 2012 à 17:09
 Krystel - 15 mai 2012 à 18:15
Bonjour,

Je me retrouve avec un dilemne dont je n'arrive pas à trouver la solution, malgré mes recherches sur le net :
Je m'explique.

Je cherche à créer une div, qui n'apparaîtrait que lorsque je clique sur une miniature. Et qui disparaitrait une fois que je clique sur une autre miniature.
J'ai utilisé pour cela le script suivant :
<script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}


J'ai également bien mis l'attribut style="display:none" à ma div mobile.
<div id="equipe-administrative" style="display:none;" >


Et appelé le javascript à mon image lien de cette manière :
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="diapo-apercu"><img src="img/apercu-president.jpg" alt="président" name="président" width="100" height="80" id="président" onClick="MM_swapImage('president','','img/president.jpg',1);MM_setTextOfLayer('légend e','','Francis LEVY - Secrétaire Général')"></td>
<td class="diapo-apercu"><a href="javascript:visibilite('equipe-administrative');"><img src="img/apercu-equipe-admin.jpg" alt="équipe administrative" width="100" height="80" onClick="MM_swapImage('president','','img/equipe-admin.jpg',1);MM_setTextOfLayer('légende',' ','L\'Equipe administrative')"; /></a>
</td>
<td class="diapo-apercu"><img src="img/apercu-del-regionaux.jpg" alt="mission th" width="100" height="80" onClick="MM_swapImage('president','','img/del-regionaux.jpg',1);MM_setTextOfLayer('légend e','','')"></td>
<td class="diapo-apercu"><img src="img/apercu-charg-mission.jpg" alt="chargés de mission" width="100" height="80" onClick="MM_swapImage('president','','img/charg-mission.jpg',1)";MM_setTextOfLayer('légende ','','')"></td>
</tr>
</table>


Pourtant, malgré tout ça, la div reste apparente même lorsque je clique sur une vignette à laquelle elle n'est pas ratachée. J'ignore pourquoi. Elle ne disparait que lorsque je reclique sur sa vignette au lieu de le faire automatiquement.

Ai-je fais une erreur dans le code ? Quelque chose que je n'aurais pas compris ?

J'espère que vous saurez m'éclairer...

Grand merci par avance !!
A voir également:

3 réponses

Voilà, c'était juste un problème de quote à la fin.

Modifie ton dernier td comme cela :

<td class="diapo-apercu"><img src="img/apercu-charg-mission.jpg" alt="chargés de mission" width="100" height="80" onClick="MM_swapImage('president','','img/charg-mission.jpg',1)";"MM_setTextOfLayer('légende ','','')"></td>
0
Effectivement je pense qu'il y avait un petit souci de ce côté là.. Merci !

Par contre, j'ai toujours le même souci de disparition de la div : je voudrais qu'elle n'apparaisse que lorsque je clique sur la miniature qui lui ai attribué, et qu'elle disparaisse lorsque je clique sur une autre miniature. Et en fait, elle reste affichée et ne disparait pas.

Y a-til quelque chose que je devrais rajouter dans le code ? Pour qu'elle redevienne invisible une fois que je clique ailleurs ?
0
Voici l'image de ce que je veux faire ça sera plus compréhensible peut-être...

http://img15.hostingpics.net/pics/430884tronbinoscopefare3.jpg

Pour résumé : lorsque je clique sur équipe administrative (barre de miniature du haut) une div tableau comportant les membres de l'équipe apparait sur la droite et doit disparaitre lorsque je ne suis plus sur équipe administrative...
0
Bonjour,
_ javascript(pour l'interactivité, faire l'action lors d'un événement: ici un clic, c'est l'événement OnClick).
_ DOM(Document Model Objet de javascript, permet de cibler la balise que vous voulez modifier:ici un div auquel vos devrez renseignez l'attribut HTML id pour lui donner des valeurs/propriétés différentes).
_ propriétés CSS (display:none ou true selon que le div est affiché ou non) ou alors tout avec le DOM javascript en créant/détruisant le div. Si votre div est en superposition de la page définiseez un z-index(niveau de superposition) supérieur à votre contenu.

Vous trouverez de nombreux exemples avec des recherches google, vous pouvez utiliser les mots clés que je vous ai indiqué ci dessus et/ou écrire une phrase indiquant votre besoin tant qu'il colle au jargon technique d'internet(donc pas disparition de la div mais affichage ou non de celle ci, les disparitions n'existent pas pour quelque chose de virtuel et informel/informatique, un élément et soit affiché, soit non visible(masqué), soit inexistant).
0
Bonjour Anne,

Serait il possible de voir le résultat auquel vous arrivez? J'aimerai utiliser ce système de div caché mais pour un portfolio et je ne sais pas dans quelle mesure je peux l'utiliser.
Merci
0