Discussion :

[CinePhil]

Bonjour,

Soit un bouton "abonné". Lorsque l'utilisateur passe la souris sur le bouton, celui-ci doit se transformer en "se désabonner".

Le code du bouton "abonné" :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<img onmouseover="change_btn_following('img_btn_following_14', fr, 16, 14)" 
  src="images/profil/btn_following_fr.png" 
  id="img_btn_following_14"
>

Le code de la fonction change_btn_following :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * change_btn_following
 * change le bouton following (abonné) en unfollow (se désabonner)
 * @param id
 */
function change_btn_following(id, langue, id_membre_connecte, id_votant)
{
	var chemin = "images/profil/btn_unfollow_" + langue + ".png";
	var action = "unfollow(" + id_membre_connecte + ", " + id_votant + ")";
	document.getElementById(id).src = chemin;
	document.getElementById(id).style = "cursor: pointer";
	document.getElementById(id).onclick = action;
}

Malheureusement, rien ne se passe.
Qu'est-ce qui cloche dans mon code ?

[NoSmoking]

Bonjour,
tu peux faire un truc dans ce style

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<img
  onmouseover = "this.src ='http://www.developpez.net/forums/images/buttons/proposer-actu.gif'"
  onmouseout  = "this.src ='http://www.developpez.net/forums/images/buttons/reply.gif'"
  src="http://www.developpez.net/forums/images/buttons/reply.gif" >

donc...pour ta fonction tu peux passer directement l'objet à la fonction via le mot clé this après correction de quelques maladresses, voir code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function change_btn_following( obj, langue, id_membre_connecte, id_votant){
//	var chemin = 'images/profil/btn_unfollow_' + langue + '.png';
//	var action = 'unfollow(' + id_membre_connecte + ', ' + id_votant + ')';
  obj.src = 'images/profil/btn_unfollow_' + langue + '.png';
  obj.style.cursor = 'pointer'; // ici style.cursor
  obj.onclick = function(){     // on passe par une fonction anonyme
    unfollow( id_membre_connecte, id_votant);
  }
}

[CinePhil]

Merci pour la réponse mais pas sûr d'avoir bien compris car ce je j'ai fait ne fonctionne pas.

J'ai juste remplacé l'id de l'image par this dans l'appel de la fonction :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img onmouseover="change_btn_following(this, fr, 16, 14)" src="images/profil/btn_following_fr.png" id="img_btn_following_14">

Et j'ai pris ton code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * change_btn_following
 * change le bouton following (abonné) en unfollow (se désabonner)
 * @param id
 */
function change_btn_following(obj, langue, id_membre_connecte, id_votant)
{
	obj.src = 'images/profil/btn_unfollow_' + langue + '.png';
	obj.style.cursor = 'pointer';
	obj.onclick = function()
	{
		unfollow( id_membre_connecte, id_votant);
	}
}

Il ne se passe toujours rien quand je passe la souris sur l'image "abonné".

Petit détail qui a peut-être son importance : l'image est dans une Fancybox.

[NoSmoking]

attention dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onmouseover="change_btn_following(this, fr, 16, 14)"

fr est une chaine de caractère et non une variable il te faut donc écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onmouseover="change_btn_following(this, 'fr', 16, 14)"

[CinePhil]

OK c'était bien ça. Merci.