Accueil    HTML    Evenement onmouseover
 



Evenement onmouseover  HTML Evenement onmouseover : survol du curseur sur une balise html

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


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

Il est complémentaire à l'évènement onmouseout qui à l'inverse se déclenche lorsque le curseur quitte 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 ...)

L'utilisation de jquery permet de simplifier de façon significative la syntaxe pour mettre en place ces évènements sur un tableau par exemple.



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





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