11548 sujets

JavaScript, DOM et API Web HTML5

Question div masquée

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.

http://img15.hostingpics.net/thumbs/mini_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...

J'ai utilisé pour cela le script suivant :

a écrit :
<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.

a écrit :
<div id="equipe-administrative" style="display:none;" >



Et appelé le javascript à mon image lien de cette manière :

a écrit :
<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>



Dans le principe tout marche : lorsque je clique sur la vignette "équipe administrative" la div avec les membres de l'équipe à gauche, qui était invisible par défaut, apparait. Mais pour qu'elle redevienne invisible, je dois pour ça recliquer sur la vignette "équipe administrative".

je cherche à ce qu'elle reste affichée, même si je double clique sur "équipe administrative" et qu'elle disparaisse naturellement quand je clique sur une autre vignette ("chargés de mission par ex.)

Et j'avoue que j'ai beau retourner le truc dans tous les sens, je ne trouve pas comment faire cela...
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 !!
Modérateur
Salut !

En gros (si j'ai bien tout compris) quand tu marque dans ta fonction :
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}

Tu n'utilise qu'une seule fonction pour afficher et masquer. Donc ton bouton "Equipe administrative" une fois que tu a cliqué dessus le display de la div change et au clic la fonction se ré-exécute mais passe dans l'autre boucle et donc disparait.

Il te faudrait une fonction qui colle un style "active" sur ton onglet.

Si le menu cliqué n'a pas le style active :
- tu effaces le style active de l'autre menu
- tu mets un display none sur la div qui était affichée
- tu le met la classe active sur le menu cliqué
- tu affiche la div correspondante
Si au contraire le menu cliqué possède déjà la classe active :
- tu termines la boucle sans rien faire


Je sais pas si je suis très clair mais c'est l'idée générale. (A adapter peut être...)


PS : tu ferais bien de séparer ton code JS du code HTML
Hummm... Déjà merci pour ta réponse.

Mais très honnêtement je n'ai pas compris grand chose pour être honnête. J'ai essayé de crée un style active à appliquer à mes boutons, avec l'attribut display:none sans succès.

C'est pas de ta faute hein : en fait, j'ai une formation de graphiste à la base, et je viens d'attaquer un contrat pro en webdesign. Donc je me forme petit à petit mais mon collègue qui s'occupait de la partie web est parti et je me retrouve à le remplacer sur le pouce. Alors bon, j'arrive à m'y retrouver le plus souvent, mais dès qu'il s'agit de trucs plus complexes, je galère encore un peu. Et le javascript en fait malheureusement parti. J'attends ma formation là dessus avec impatience 8

Dans le doute je vais te copier l'ensemble de mon code. Quelqu'un comprendra peut-être... Je desespère un peu là Smiley ohwell

Mes styles css :
a écrit :
<style type="text/css">
#gdes-images {
position:absolute;
left:219px;
top:167px;
width:485px;
height:345px;
z-index:1;
}
#vignettes {
position:absolute;
left:219px;
top:38px;
width:470px;
height:97px;
z-index:2;
background-color: #FFF;
padding-left: 15px;
padding-top: 15px;
}
.diapo-apercu {
opacity:0.5;
}
.diapo-apercu2 {

}
.diapo-apercu2:hover {
cursor: pointer;
opacity:1;
}

.diapo-apercu:hover {
cursor: pointer;
opacity:1;
}

#légende {
position:absolute;
left:219px;
top:520px;
width:485px;
height:35px;
z-index:3;
}
.texte-légende {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333;
}
#equipe-administrative {
position:absolute;
left:720px;
top:159px;
width:126px;
height:353px;
z-index:4;

}
#del-regionaux {
position:absolute;
left:720px;
top:159px;
width:126px;
height:353px;
z-index:4;

}
#contener {
position:absolute;
left:192px;
top:12px;
width:666px;
height:546px;
z-index:1;
background-color: #eceded;
}
</style>


mes scripts js :
a écrit :
<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" ;
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_setTextOfLayer(objId,x,newText) { //v9.0
with (document) if (getElementById && ((obj=getElementById(objId))!=null))
with (obj) innerHTML = unescape(newText);
}
</script>


et mon body :
<body onLoad="MM_preloadImages('img/equipe-admin.jpg','img/mission-th.jpg','img/president.jpg','img/josiane.jpg','img/jocelyn.jpg','img/aurelie.jpg','img/myriam.jpg','img/charg-mission.jpg')"><div id="contener"></div>
<div id="gdes-images"><img src="img/president.jpg" alt="Président du Fare" name="president" width="485" height="345" id="president"></div>
<div id="vignettes"><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&eacute;sident" width="100" height="80" id="pr&eacute;sident" onClick="MM_swapImage('president','','img/president.jpg',1);MM_setTextOfLayer('l&eacute;gende','','Francis LEVY - Secr&eacute;taire G&eacute;n&eacute;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&eacute;gende','','L\'Equipe administrative')"; /></a></td>
    <td class="diapo-apercu"><a href="javascript:visibilite('del-regionaux');"><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&eacute;gende','','')"></a></td>
    <td class="diapo-apercu"><a href="javascript:visibilite('');"><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&eacute;gende','','')"></a></td></tr>
</table></div>

<div class="texte-l&eacute;gende" id="légende">Francis LEVY - Secr&eacute;taire G&eacute;n&eacute;ral</div>
<div id="equipe-administrative"  style="display:none;"><table width="100%" height="357" border="0" align="center" cellpadding="0" cellspacing="8">
<tr><td class="diapo-apercu2"><img src="img/apercu-josiane.jpg" width="98" height="78" onClick="MM_swapImage('president','','img/josiane.jpg',1);MM_setTextOfLayer('l&eacute;gende','','Josiane LAGADEC - Comptable')"></td></tr>
  <tr><td class="diapo-apercu2"><img src="img/apercu-jocelyn.jpg" width="98" height="78" onClick="MM_swapImage('president','','img/jocelyn.jpg',1);MM_setTextOfLayer('l&eacute;gende','','Jocelyne BOUTONNET - DAF-RH')"></td></tr>
  <tr><td class="diapo-apercu2"><img src="img/apercu-aurelie.jpg" width="98" height="78" onClick="MM_swapImage('president','','img/aurelie.jpg',1);MM_setTextOfLayer('l&eacute;gende','','Aur&eacute;lie DUFOUR - Assistante de direction et de gestion')"></td></tr>
  <tr><td  class="diapo-apercu2" height="80"><img src="img/apercu-myriam.jpg" width="98" height="78" onClick="MM_swapImage('president','','img/myriam.jpg',1);MM_setTextOfLayer('l&eacute;gende','','Myriam CHAUVET - Assistante de Gestion FAJA')"></td></tr>
</table>
</div>
<div id="del-regionaux" style="display:none;" ><table width="100%" height="357" border="0" align="center" cellpadding="0" cellspacing="8">
  <tr><td class="diapo-apercu2"><img src="img/apercu-stephanie.jpg" width="98" height="78" onClick="MM_swapImage('president','','img/stephanie.jpg',1);MM_setTextOfLayer('l&eacute;gende','','')"></td></tr>
  <tr><td class="diapo-apercu2"><img src="img/apercu-damien.jpg" width="98" height="78" onClick="MM_swapImage('president','','img/damien.jpg',1);MM_setTextOfLayer('l&eacute;gende','','')"></td></tr>
  <tr><td class="diapo-apercu2"><img src="img/apercu-benedicte.jpg" width="98" height="78" onClick="MM_swapImage('president','','img/benedicte.jpg',1);MM_setTextOfLayer('l&eacute;gende','','')"></td></tr>
  <tr><td  class="diapo-apercu2" height="80"><img src="img/apercu-sabine.jpg" width="98" height="78" onClick="MM_swapImage('president','','img/sabine.jpg',1);MM_setTextOfLayer('l&eacute;gende','','')"></td></tr>
</table>
</div>
</body>


[/i][/i][/i][/i][/i]
Modifié par AnneMD (05 Apr 2012 - 14:40)
Modérateur
Hahaha sisi c'est peut être du a moi ! ^^'

Je vais essayer de te donner une solution simple, pas forcément optimisée mais qui peut marcher.

Tout d'abord place des id différents sur tes menus (ceux que tu va cliquer) puis sur tes blocs (ceux qui vont apparaitre/disparaitre).
Ex : #menu1 #menu2 #menu3 et #bloc1 #bloc2 #bloc3 (fait bein en sorte que les numéro soient reliés sinon c'est le bord**)

Ensuite tout tes onclick dans les balise tu les vire, t'y vera plus clair.
Cette partie du javascript que tu viens de virer tu la mets juste avant de fermer le body avec cette syntaxe :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){ /*la ton document est "ready", il va être attentif à ce qu'il se passe*/
		var menu='menu1'; /*stocke le menu actif, par défaut menu1*/
		var bloc='bloc1'; /*stock le bloc actif, par défaut le bloc1*/
		$("#menu1").click(function(){visibilite('menu1','bloc1',menu,bloc); menu='menu1'; bloc='bloc1';}); /*si on clic sur le menu1*/
		$("#menu2").click(function(){visibilite('menu2','bloc2',menu,bloc); menu='menu2'; bloc='bloc2';}); /*si on clic sur le menu2*/
		$("#menu3").click(function(){visibilite('menu3','bloc3',menu,bloc); menu='menu3'; bloc='bloc3';}); /*si on clic sur le menu3*/
	})
	</script>
</body>


avec la fonction visibilite :



function visibilite(menunew,blocnew,menuold,blocold)
{
if(menunew != menuold){ /*si le menu cliqué est différent du menu déjà actif on change de bloc*/
    document.getElementById(blocold).style.display = "none" ;
    document.getElementById(blocnew).style.display = "" ;
}
}



Voila normalement j'ai a peut près adapté a ton problème.

Il faut que je décortique un peu plus ou tu arrives a comprendre ? Smiley murf
Modifié par _laurent (05 Apr 2012 - 15:37)
Merci beaucoup pour ton aide (et ta patience surtout !!)

C'est tout bon, j'ai réussi à faire ce que je voulais. Au bout d'un jour et demi il était temps ! haha..

merci encore.. Smiley smile
Sujet clos
Aller à