onclick changement image [Résolu]

[charles888]

Bonjour,

J'ai un soucis avec un onclick, il ne veut pas changer d'image :/

J'ai une page .jsp avec une image :

Code :

<img style="right:0px;position:absolute;" class="img_info" src="img/icone_info2.png" onmouseover="this.src='img/icone_info.png'" onmouseout="this.src='img/icone_info2.png'" onclick="Affiche_OBJ('bloc_i<%=i%>_j<%=j%>'),this.src='img/icone_info.png'"/>

Quand je passe dessus une image apparait, quand je pars l'image redeviens a la normal. Et j'aimerais quand quand je click dessus cela me fasse apparaitre un div (ma fonction marche) mais aussi que l'image reste comme si j'étais en mouseover. alors j'ai testé de mettre dans le onclick :

Code :

this.src='img/icone_info2.png'

et j'ai aussi essayé de le faire dans ma fonction Affiche_OBJ mais sans succès :/

Merci d'avance pour vos aident

[andry.aime]

Bonjour,

onclick="Affiche_OBJ('bloc_i<%=i%>_j<%=j%>'),this.src='img/icone_info.png'"

";" entre les instructions mais pas ",".

A+.

[RomainVALERI]

Il faudra peut-être aussi, en fonction du rendu final souhaité, que tu désactives le mouseout de l'élément tant que la souris survole le div qui apparait sur ton click, pour le réactiver en sortie. Est-ce clair ?

[NoSmoking]

Bonjour,
à l'affichage de la DIV tu annules l'action sur le mouseout, en ayant pris soin de la sauvegarder pour le cas où.

[charles888]

Merci pour toutes vos réponses

Bon alors j'ai supprimé le mouseover et le mouseout et dans ma fonction affiche objet j'ai le changement d'image lorsque je click

Code :

1
2
3
4
5
6
7
8
9
10
11
12
function Affiche_OBJ(nameDIV,nameIMG){
	if (document.getElementById(nameDIV).style.display == 'block')
	{ 
		document.getElementById(nameDIV).style.display = 'none';
		document.getElementById(nameIMG).src='img/icone_info2.png';
	} 
	else 
	{
		document.getElementById(nameDIV).style.display = 'block'; 
		document.getElementById(nameIMG).src='img/icone_info.png';
	} 
};

après j'ai essayer de remettre le mouseover et mouseout mais du coup lorsque je click sur l'image elle ne reste pas :/

Donc pour le moment j'ai supprimé le mouseover et mouseout pour que lorsque l'utilisateur clik l'image reste changé

[mekal]

et si tu declarait une variable globale qui contiendrait l'adresse de l'image quand on est onmouseout et que tu modifirais quand on clic par l'adresse de l'image que l'on a en onmouseover

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
var monimage=monimage='img/icone_info2.png';
 
function Affiche_OBJ(nameDIV,nameIMG){
	if (document.getElementById(nameDIV).style.display == 'block')
	{ 
		document.getElementById(nameDIV).style.display = 'none';
		monimage='img/icone_info2.png';
	} 
	else 
	{
		document.getElementById(nameDIV).style.display = 'block'; 
		monimage='img/icone_info.png';
	} 
}

[NoSmoking]

dans la fonction d'affichage, tu passes en paramètre l'élément déclencheur et l'ID du div à afficher

Code :

1
2
3
function Affiche_OBJ( obj, id_div){
....
}

dans ton cas l'appel deviendra

Code :

onclick="Affiche_OBJ( this, 'bloc_i<%=i%>_j<%=j%>');"

dans la fonction il faut inhiber le mouseout, mais en garder trace pour restauration ultérieure

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Affiche_OBJ( obj, id_div){
  obj.savMouseOut = obj.onmouseout;           // sauvegarde evenement par surchage
  obj.onmouseout = function(){return(false)}; // inhibe evenement
  var oDiv = document.getElementById( id_div);
  oDiv.parentClick = obj;                     //on garde pour plus tard
  if( oDiv){
    if( oDiv.style.display == 'block'){ 
      oDiv.style.display = 'none';
    }
    else {
      oDiv.style.display = 'block'; 
    }
  }
}

[charles888]

Bonjour à vous,
Merci pour votre aide

Bon alors on se rapproche

maintenant le onmouseover et onmouseout fonctionne très bien et lorsqu'e je clik mon div caché apparait et l'image change mais lorsque je re-click sur l'image le div disparait mais l'image ne se remet pas à sa forme d'origine :/

voici le code que j'ai : (fichier js)

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Affiche_OBJ(nameDIV,nameIMG,obj)
{
	obj.savMouseOut = obj.onmouseout;         
	obj.onmouseout = function()
	{
		return(false);
	};
	var oDiv = document.getElementById(nameDIV);
	  oDiv.parentClick = obj;                  
	  if( oDiv)
	  {
	    if( oDiv.style.display == 'block')
	    { 
	      oDiv.style.display = 'none';
	    }
	    else 
	    {
	      oDiv.style.display = 'block'; 
	    }
	  }
};

et celui dans mon fichier .jsp :

Code :

<img style="right:0px;position:absolute;height:23px;width:25px;" onmouseover="this.src='img/icone_info.png'" onmouseout="this.src='img/icone_info2.png'" id="img_info_i<%=i%>_j<%=j%>" src="img/icone_info2.png" onclick="Affiche_OBJ('bloc_i<%=i%>_j<%=j%>','img_info_i<%=i%>_j<%=j%>',this)"/>

[NoSmoking]

Envoyé par charles888

Bon alors on se rapproche

maintenant le onmouseover et onmouseout fonctionne très bien et lorsqu'e je clik mon div caché apparait et l'image change mais lorsque je re-click sur l'image le div disparait mais l'image ne se remet pas à sa forme d'origine :/

cela ce précise...

donc résumons
- sur le 1st click la DIV apparaît et l'image reste fixe
- sur le 2nd click la DIV disparaît et l'image reprend son fonctionnement normale

cela implique qu'il y a 3 événements à modifier, onclick, onmouveover et onmouseout et non 1 seul comme nous l'avons fait.

on peut faire l'approche suivante, un peu différente

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
function fnClick( obj, id_div){
  // 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';
  };
}

la fonction à perdu son nom car on est loin d'un simple affichage/masquage, mais l'appel reste identique à celui que je t'avais donné

Code :

onclick = "fnClick( this, 'bloc_i<%=i%>_j<%=j%>');"

[charles888]

Bonjour,

Désolé de ne pas avoir répondu plus tôt mais c'était le week end =)

Je viens de tester ton code NoSmoking et c'est niquel pil ce qui correspond.

Un grand merci a vous =)