Cacher des blocks

Version imprimable

Cacher des blocks

Bonjour à tous, j'ai un petit soucis mais je n'arrive pas à le résoudre en solo :/

Je vous explique : j'ai 5 images (bleu claire)

Code:

1
2
3
4
5
<img id="img1" onmouseover="this.src='img/ajout_application.jpg'" onmouseout="this.src='img/ajout_application2.jpg'" src="img/ajout_application2.jpg" onclick="fnClick2( this, 'bloc_application');"/>
      <img id="img2" onmouseover="this.src='img/ajout_url.jpg'" onmouseout="this.src='img/ajout_url2.jpg'" src="img/ajout_url2.jpg" onclick="fnClick2( this, 'bloc_url');"/>
      <img id="img3" onmouseover="this.src='img/suppr_appli.jpg'" onmouseout="this.src='img/suppr_appli2.jpg'" src="img/suppr_appli2.jpg" onclick="fnClick2( this, 'bloc_suppr_appli');"/>
	  <img id="img4" onmouseover="this.src='img/suppr_url.jpg'" onmouseout="this.src='img/suppr_url2.jpg'" src="img/suppr_url2.jpg" onclick="fnClick2( this, 'bloc_suppr_url');"/>
	  <img id="img5" onmouseover="this.src='img/ajout_serv.jpg'" onmouseout="this.src='img/ajout_serv2.jpg'" src="img/ajout_serv2.jpg" onclick="fnClick2( this, 'bloc_ajout_serv');"/>

quand on click sur une image un block apparait et l'image devient bleu foncé, si on reclick sur la meme image le block disparait et l'image redevient bleu clair.

Mon soucis est que si on click sur une autre image un autre block apparait mais sans cacher l'ancien ni rendre l'ancienne image bleu foncé en bleu clair.

Donc j'aimerais que lorsqu'on click sur une image lorsqu'un block est deja afficher cela le remette en display:none et l'image en bleu clair puis cela affiche le nouveau block.

Voici mon code js : et en ancienneDiv ce que j'ai essayé de faire mais sans succès

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//var ancienneDiv = "null";
 
				//(this, bloc_url)
function fnClick2( obj, id_div){
	 // document.getElementById(ancienneDiv).style = 'none';
	  // get element a afficher/masquer
	  var oDiv = document.getElementById(id_div);
	  // affiche la DIV
	  oDiv.style.display = 'block';
	  // sauvegarde des evenements
	  if( !obj.saveEvent){
	    obj.saveEvent = {
	      over : obj.onmouseover,
	      out : obj.onmouseout,
	      click : obj.onclick
	    }
	  }
	  // redefini les evenements
	  obj.onmouseout = function(){};
	  obj.onmouseover = function(){};
	  obj.onclick = function(){
	    // restaure les evenements
	    this.onmouseout = this.saveEvent.out;
	    this.onmouseover = this.saveEvent.over;
	    this.onclick = this.saveEvent.click;
	    // masque la DIV
	    oDiv.style.display = 'none';
	   // ancienneDiv = id_div;
 
	  };
}

J'espère que j'ai été clair :)
Merci pour votre aide

Ton approche avec la variable ancienneDiv me paraît pas mal pourtant :
Code:

1 2 3 4 5 6 7 8 9 var ancienneDiv; function fnClick2( obj, id_div){ if (ancienneDiv) { ancienneDiv.style.display = 'none'; } // get element a afficher/masquer var oDiv = document.getElementById(id_div); ancienneDiv = oDiv; }
Comme tu peux le voir, tu peux directement passer l'élément div en variable, pas seulement son ID.

16/02/2011, 12h00
charles888

Merci :)

Pour les block ca marche niquel, je vais essayé de faire un truc du même genre avec les images je vous tiens au courant :)

Alors j'ai essayé un truc de ce genre mais ca fonctionne pas :/

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var ancienneDiv;
var ancienneIMG;
var ancienneSRC;
 
				//(this, id_block a afficher, id_img, src_de_image))
function fnClick2( obj, id_div,id_img,src_img){
	if (ancienneDiv) {
		ancienneDiv.style.display = 'none';
		ancienneIMG.src = ancienneSRC;
	}
	  // get element a afficher/masquer
	  var oDiv = document.getElementById(id_div);
	  ancienneDiv = oDiv;
	  ancienneIMG = document.getElementById(id_img);
	  ancienneSRC = src_img;

16/02/2011, 14h04
Loceka

T'es sûr que tu sauvegarde pas l'image après qu'elle ait été changée ? (du coup tu sauvegarde la bleue fonçée dans ancienneSRC)
16/02/2011, 14h11
charles888

Enfète je m'étais trompé j'avais mis

Code:

ancienneSRC = src_de_image;

au lieu de

Code:

ancienneSRC = src_img;

donc ca marche mais pas encore comme je le souhaiterais :/

- au début aucun block afficher, 5 images en bleu clair, onmouseover elles deviennent bleu foncé et onmouseout redeviennent bleu clair
- au click l'image reste bleu foncé et le block apparait
- si on reclick sur la même image c'est bon image redevient bleu clair et le block disparait
- en revanche si on click sur une autre image, l'ancien block disparait et l'image redevient bleu clair, la nouvelle image devient foncé et le block apparait mais par contre au onmouseover et onmouseout ne fonctionne plus sur l'ancienne image que l'on avait cliqué