Accueil    HTML    Evenement onmouseout
 



Evenement onmouseout  HTML Evenement onmouseout : sortie du curseur d'une balise html

«  Partie précédente  |  Index  |  Partie suivante  »


L'évènement onmouseout est lié à la position et au déplacement de la souris. Il déclenche une action lorsque le curseur de la souris quitte l'élément sur lequel est déclaré cet évènement.

Il est complémentaire à l'évènement onmouseover qui à l'inverse se déclenche lorsque le curseur entre sur la zone graphique d'une balise html. Ces deux évènements sont très régulièrement utilisés ensemble pour pouvoir réaliser des effets visuels tels que des changements de styles pour modifier la couleur de fond, police ...)



Exemple d'utilisation pour l'évènement onmouseout :





Exemple simple de gestion des évènement onmouseover et onmouseout :

<div style="width:100px; height:100px; border:solid 1px black; text-align:center;"
    onmouseover="this.innerHTML='Dedans'; this.style.backgroundColor='#87CEFA';"
    onmouseout="this.innerHTML='Dehors'; this.style.backgroundColor='lightgrey';">
</div>

Exemple plus élaboré avec un tableau (simplifiable avec jquery) :

<table rules="rows" cellpadding="3" cellspacing="0" style="border:solid 1px black;
   font-family:verdana; font-size:12px; padding:0px; margin:0px; cursor:default;">
   <tr style="height:20px;">
      <th style="width:80px;">titre</th>
      <th style="width:80px;">titre</th>
      <th style="width:80px;">titre</th>
      <th style="width:80px;">titre</th>
   </tr>
   <tr style="height:20px;background-color:#ededed; text-align:center;"
      onmouseover="this.style.backgroundColor='#D5E5ED';"
      onmouseout="this.style.backgroundColor='#EDEDED';">
   <td>test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
   </tr>
   <tr style="height:20px;background-color:#edf7ff; text-align:center;"
      onmouseover="this.style.backgroundColor='#D5E5ED';"
      onmouseout="this.style.backgroundColor='#EDF7FF';">
   <td>test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
   </tr>
   <tr style="height:20px;background-color:#ededed; text-align:center;"
      onmouseover="this.style.backgroundColor='#D5E5ED';"
      onmouseout="this.style.backgroundColor='#EDEDED';">
   <td>test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
   </tr>
   <tr style="height:20px;background-color:#edf7ff; text-align:center;"
      onmouseover="this.style.backgroundColor='#D5E5ED';"
      onmouseout="this.style.backgroundColor='#EDF7FF';">
   <td>test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
   </tr>
</table>



Exemple simple de gestion des évènement onmouseover et onmouseout :



Exemple plus élaboré avec un tableau (simplifiable avec jquery) :

titre titre titre titre
test test test test
test test test test
test test test test
test test test test