IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
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 ajouter un raccourci clavier ?



Comment remplacer une image par une autre lors du passage de la souris ?
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 ?
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 ?
auteur : simone.51
Voici la fonction : 
function detectTouche(e){
    if(parseInt(navigator.appVersion,10) >=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 ?
auteurs : simone.51, Bovino
Si vous souhaitez récupérer les coordonnées de la souris par rapport à la page (prise en compte du scroll) : 

function detectMouse(e){
    if(e){
        document.getElementById('zone').innerHTML = e.pageX ;
        document.getElementById('zone1').innerHTML = e.pageY;
}
    else{
        var monBody = document.documentElement || document.body;
document.getElementById('zone').innerHTML = window.event.x + monBody.scrollLeft;
        document.getElementById('zone1').innerHTML = window.event.y + monBody.scrollTop;
    }
}
Si vous voulez récupérer les coordonnées par rapport à la partie visible : 

function detectMouse(e){
    if(!e){
e = window.event;
}
    document.getElementById('zone').innerHTML = e.clientX ;
    document.getElementById('zone1').innerHTML = e.clientY;
}
Et voici le corps de la page : 

<body onmousemove="detectMouse(event)">
    <span id="zone"></span>
    <span id="zone1"></span>
</body>
Le premier champ affichera la coordonnée horizontale de la souris, le deuxième, la coordonnée verticale.

lien : Exemple d'utilisation de ce script

Comment déclencher un événement à l'aide d'un script ?
auteur : denisC
Ca dépend bien évidemment du navigateur.

Avec Firefox (et tout navigateur compatible DOM niveau 2) :

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'événement souris
  true,       // est-ce que l'événement doit se propager (bubbling) ?
  true,       // est-ce que le défaut pour cet événement peut être annulé ?
  window,     // l' 'AbstractView' pour cet événement
  1,          // details -- Pour les événements 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 pressé
  target      // l'élément source de cet événement
);
target.dispatchEvent( oEvent );
Avec IE : 

target.fireEvent( "onclick" );

Et bien entendu, ce n'est déjà pas la même syntaxe, ce ne sont pas non plus 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 suivis sur un événement click.


Comment ajouter un raccourci clavier ?
auteur : Jérôme
Théoriquement, l'attribut HTML accesskey devrait suffire, mais sur certains navigateurs, il n'a aucun effet sur les liens hypertextes. Il faut donc simuler le clic avec une petite fonction JavaScript.

Par exemple, pour activer un lien vers developpez.com à l'aide de la combinaison de touches "Alt+D" :
A placer dans le head

function akChk(e){
var event = window.event || e;
if (event.keyCode==68 && event.altKey) {
// 68 est le code décimal ASCII du caractère D
document.getElementById('developpez').click();
}
else{ 
return true;
}
}
A placer dans la balise body

onkeydown="akChk(e)"
Le lien :

<a id="developpez" href="http://www.developpez.com" accesskey="d">Aller sur Developpez.com</a>


Consultez les autres F.A.Q.

Valid XHTML 1.0 TransitionalValid CSS!

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.