Modifier l'aspect du curseur de la souris
Pour changer la forme du pointeur de la souris, modifiez la propriété cursor prise en compte par tous les navigateurs (Firefox, IE, Safari, ...). Cet attribut css est utilisé dans les pages HTML avec du javascript pour répondre à des évènements de la souris tels que onmouseover et onmouseout.
Il existe 16 curseurs par défaut (voir image ci-contre). Pour comprendre, prenons d'exemple d'un bouton d'une page HTML crée à partir d'un div à la place du composant input type="button". Quelques lignes de code Javascript et les feuilles de style suffisent pour donner "vie" à cette donne et permettre l'interaction.
Exemple à copier/coller dans une page HTML
- changer la forme du curseur lors de l'entrée et la sortie d'une zone (DIV vert)
- charger un curseur personnalisé sur l'ensemble du document
<html>
<head>
<script type="text/javascript">
/**
* Charger un curseur à partir des constantes
*/
function changeCursor(cursorname)
{
document.getElementById("boutton").style.cursor=cursorname;
}
/**
* Charger un curseur à partir d'un fichier *.cur, *.ani
*/
function loadCursor() {
document.body.style.cursor = "url('./123.cur'), myCurseur" ;
}
</script>
</head>
<body>
<div id="boutton" style="background:#00FF00; border:1px solid #008000; height:45px; width:150px; margin-bottom:30px"
onmouseover="changeCursor('pointer')" onmouseout="changeCursor('default')">
Deplacer le curseur ici pour changer le curseur</div>
<input type="button" onclick="loadCursor()" value="Charger un curseur" />
</body>
</html>
<head>
<script type="text/javascript">
/**
* Charger un curseur à partir des constantes
*/
function changeCursor(cursorname)
{
document.getElementById("boutton").style.cursor=cursorname;
}
/**
* Charger un curseur à partir d'un fichier *.cur, *.ani
*/
function loadCursor() {
document.body.style.cursor = "url('./123.cur'), myCurseur" ;
}
</script>
</head>
<body>
<div id="boutton" style="background:#00FF00; border:1px solid #008000; height:45px; width:150px; margin-bottom:30px"
onmouseover="changeCursor('pointer')" onmouseout="changeCursor('default')">
Deplacer le curseur ici pour changer le curseur</div>
<input type="button" onclick="loadCursor()" value="Charger un curseur" />
</body>
</html>
Ajouter un commentaire
Pseudo
Adresse email
Site internet (optionnel)
Votre commentaire
| Fobec |  |
| connecté le 09/05/2012 | |
| 36 ans - France Nord-Est | |
| 104 articles dans la section | |
| Contacter l'auteur | |