Discussion :

[Dharius]

Bonjour,

Voilà, j'ai une liste en html du genre :

Code :

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

1
2
3
4
5
6
7
8
 
<div id=liste>
<div><a href="/membres/index.php?action=liste" rel=180 title="Membres" OnMouseOut="tooltip('','','')" onMouseOver="tooltip(this.title,this.rel,'')"><img alt="Membres" src="/membres/im/images/group.png" border="0" /></a></div>
<div><a href="/membres/index.php?action=liste" rel=200 title="Inviter des amis" OnMouseOut="tooltip('','','')" onMouseOver="tooltip(this.title,this.rel,'')"><img alt="Invite" src="/membres/im/images/invite.png" border="0" /></a></div>
<div><a href="/membres/profil_9.html" rel=245 title="Profil" OnMouseOut="tooltip('','','')" onMouseOver="tooltip(this.title,this.rel,'')"><img alt="Profil" src="/membres/im/images/profil.png" border="0" /></a></div>
<div><a href="/membres/messagerie.php" rel=330 title="Messagerie interne" OnMouseOut="tooltip('','','')" onMouseOver="tooltip(this.title,this.rel,'')"> <img alt="Messagerie interne" src="/membres/im/images/email.png" border="0"/></div>
...
</div>

Je sais qu'il est possible pour chaque ligne de supprimer les "onMouseOver" et "onMouseOut", avec un système d'Event en javascript pour avoir des listes clean (et extensibles) du genre

Code :

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

1
2
3
4
5
6
7
8
 
<div id=liste>
<div><a id="monidtest" href="/membres/index.php?action=liste" rel=180 title="Membres"><img alt="Membres" src="/membres/im/images/group.png" border="0" /></a></div>
<div><a href="/membres/index.php?action=liste" rel=200 title="Inviter des amis"><img alt="Invite" src="/membres/im/images/invite.png" border="0" /></a></div>
<div><a href="/membres/profil_9.html" rel=245 title="Profil" ><img alt="Profil" src="/membres/im/images/profil.png" border="0" /></a></div>
<div><a href="/membres/messagerie.php" rel=330 title="Messagerie interne"> <img alt="Messagerie interne" src="/membres/im/images/email.png" border="0"/></div>
...
</div>

J'ai essayé en cherchant du côté de "addEventListener" avec par exemple :

Code :

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

1
2
 
document.getElementById('monidtest').addEventListener("onmouseover",alert('test'),false);

mais le problème, c'est qu'elle semble s'exécuter automatiquement (genre je rafraichi la page et ca se lance), alors que je veux qu'elle se lance que sur un "onmouseover"...

Quelqu'un s'y connait-il ? Ça me serait très utile !

MERCI d'avance.

[emmanuel.remy]

Salut,

Pour les navigateurs conforme W3C (Firefox, Safari, Opera...):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13

function traiteEvent(event) {
//Code de l'événement

}

//NOTER qu'il n'y a pas de onmouseover, simplement mouseover
//le dernier paramètre correspond à la phase de capture (à découvrir si besoin)
document.getElementById('monidtest').addEventListener("mouseover", traiteEvent, false);

//pour le supprimer
document.getElementById('monidtest').removeEventListener("mouseover",  traiteEvent, false);

Pour IE:

Code :

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

1
2
3
4
5
6
7
8
9
 
function traiteEvent() {
//Code de l'événement qui utilise window.event
 
}
 
document.getElementById('monidtest').attachEvent("onmouseover", traiteEvent);
//pour le supprimer
document.getElementById('monidtest').detachEvent("onmouseover", traiteEvent);

ERE