Publié le 15/06/2010
Auteur fobec
Réseaux sociaux
0 partages
0 tweets
0 plus
0 commentaires

Modifier l'aspect du curseur de la souris

Sur une page internet, le type de curseur de la souris guide l'internaute dans sa navigation. En effet, en fonction de la forme du curseur, on connait le type d'action que l'on peut exécuter, par exemple la main ouvre un lien internet ou encore la double flèche permet de redimensionner l'élément.

Changer l'apparence du curseur de la souris

css-cursorPour 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.






Modifier dynamiquement l'aspect du curseur

Le but de cet article est de savoir comment changer le curseur de la souris à la volé. Le code Javascript ci-dessous permet de :
- 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

Exemple à copier/coller dans une page HTML

<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>


Lorsque l'internaute survole un lien sur une page web, le curseur prend automatiquement l'aspect de la main. Cette modification signale que l'on peut exécuter une action avec cet élément. Le code HTML ci-dessous permet de moficier la souris également sur tous les éléments de la page que ce soit un DIV ou un bouton.

Ajouter un commentaire

Les champs marqués d'un * sont obligatoires, les adresses emails se sont pas publiées.

A lire aussi

Réseaux sociaux
Présentation de l'article
Catégorie
tuto - webmaster
Mise a jour
15/06/2010
Visualisation
vu 5433 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 261 articles
|BIO_PSEUDO|
Commentaires récents

Publié par chuchunain dans tuto

Petite correction dans votre code. Le premier graphe genere avec 15 valeurs aleatoires devrait faire appel au graphe "myGraph" et non "graph" sinon l'objet canvas ne recoit rien. m...

Publié par Fobec dans tuto

Bonjour,

Sur Fobec.com, nous utilisons mod_expires.c pour envoyer automatiquement un code 304 au navigateur internet.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType im...

Publié par Tchat dans news

Analyses interessantes.
J'ai constate aussi des comportements etranges de Google concernant les placements des sites sur leurs requetes.
Par contre j'ai remarque que Google ne tient pl...

Publié par Fobec dans php5

Bonjour,
vous pouvez poster un message sur le forum, la communaut vous donnera un coup de main pour la mise en place du script.

Publié par piranhas dans java

bonjour, je veux te signaler que la piece jointe est fausse car il n\'y pas de liaison entre le modele et la vue, toutes le information passe par le controlleur.