Faq Javascript

Sommaire > La détection des évènements
        Comment remplacer une image par une autre lors du passage de la souris ?
        Comment changer la couleur de fond d'une ligne (balise <tr>) lors du passage de la souris ?
        Comment détecter l'appui sur une touche du clavier ?
        Comment récupérer les coordonnées de la souris ?
        Comment déclencher un évènement à l'aide d'un script?

Comment remplacer une image par une autre lors du passage de la souris ?

[haut]

auteur : simone.51

<img id='img' src="ImgDepart.gif" border=0
	onMouseover="document.getElementById('img').src='ImgDessus.gif'"
	onMouseout="document.getElementById('img').src='ImgDepart.gif'">

Ici, on est en présence de deux événements :
- onMouseover --> lorsque le souris passe au dessus de l'image
- onMouseout --> lorsque la souris sort de l'image

Comment changer la couleur de fond d'une ligne (balise <tr>) lors du passage de la souris ?

[haut]

auteur : simone.51

<table border="0">
    <tr onmouseover="this.style.backgroundColor='red'"
		onmouseout="this.style.backgroundColor='white'">
        <td>coucou</td>
        <td>re coucou</td>
    </tr>
</table>

Au chargement de la page, la couleur de fond est blanche (par défaut).

Lorsque l'on passe la souris dessus, elle devient rouge :

- onmouseover="this.style.backgroundColor='red'"
Lorsqu'on enlève la souris de la ligne, elle redevient blanche :
- onmouseout="this.style.backgroundColor='white'"

Comment détecter l'appui sur une touche du clavier ?

[haut]

auteur : simone.51

Voici la fonction :

function detectTouche(e){
    if(parseInt(navigator.appVersion) >=4){
        if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
            document.getElementById('zone').value = String.fromCharCode(e.which);
            document.getElementById('zone1').value = e.which;
        }
        else{ // pour Internet Explorer
            document.getElementById('zone').value = String.fromCharCode(e.keyCode);
            document.getElementById('zone1').value = e.keyCode;
        }
    }
}

Et voici le corps de la page :

<body onKeyDown="detectTouche(event)">
    <input type="text" id="zone" size=30>
    <input type="text" id="zone1" size=30>
</body>

Dans le premier champ texte, la lettre s'affichera et dans la seconde, son code ASCII associé.

Comment récupérer les coordonnées de la souris ?

[haut]

auteur : simone.51

Voici la fonction :

function detectMouse(e){
    if(parseInt(navigator.appVersion) >=4){
        if(navigator.appName == 'Netscape'){
            document.getElementById('zone').value = e.pageX ;
            document.getElementById('zone1').value = e.pageY;
        }
        else{
            document.getElementById('zone').value = event.x ;
            document.getElementById('zone1').value = event.y;
        }
    }
}

Et voici le corps de la page :

<body onMouseMove="detectMouse(event)">
    <input type="text" id="zone" size=4>
    <input type="text" id="zone1" size=4>
</body>

Le premier champ affichera la coordonnée horizontale de la souris, et le deuxième, la coordonnée verticale.

Comment déclencher un évènement à l'aide d'un script?

[haut]

auteur : denisC

Ca dépend bien évidemment du navigateur.

Soit firefox (et tout navigateur compatible DOM2):

Exemple simple:

target.dispatchEvent("click");

Où target est l'élément sur lequel a lieu l'évènement.

Exemple complet (évènement souris):

oEvent = document.createEvent( "MouseEvents" );
oEvent.initMouseEvent(
  "click",    // le type d'evenement souris
  true,       // est-ce que l'evenement doit se propager (bubbling)?
  true,       // est-ce que le défaut pour cet evenement peut être annulé?
  window,     // l' 'AbstractView' pour cet evenement
  1,          // details -- Pour les evenements click, le nombre de clicks
  1,          // screenX
  1,          // screenY
  1,          // clientX
  1,          // clientY
  false,      // est-ce que la touche Ctrl est pressée?
  false,      // est-ce que la touche Alt est pressée?
  false,      // est-ce que la touche Shift est pressée?
  false,      // est-ce que la touche Meta est pressée?
  0,          // quel est le bouton préssé
  target      // l'élement source de cet evenement
);
target.dispatchEvent( oEvent );

Sous IE :

target.fireEvent( "onclick" );

Et, bien entendu, ce n'est déjà pas la même syntaxe, ce n'est en plus pas les mêmes effets.
Sous Firefox l'évènement est réel, c'est à dire que c'est exactement la même chose que si vous cliquiez sur la souris. Par exemple l'évènement click déclenché sur un lien suivra ce lien.
Sous IE, fireEvent ne déclenche que les listeners mis en place sur l'élément, pas son comportement par défaut. Les liens ne sont par exemple pas suivi sur un évènement click.

Consultez les autres F.A.Q's

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.