Par George

Avatar de George

Changer l’image du curseur de la souris en CSS

Vous en avez marre de l’image du curseur par défaut de votre souris, éternellement la même quels que soient les sites que vous développez ?

Changez la en CSS, rien de plus simple !

La propriété “cursor” est certes méconnue, mais fonctionne très bien sur tous les navigateurs récents. Elle s’utilise, comme pour les “background-image”, avec la valeur “url()”. Vous pouvez utiliser les formats classiques d’image : PNG, GIF, JPG, etc…,  et bien sûr le format curseur (extension .cur).
Et devinez quel est le seul navigateur à ne gérer que les .cur ?

Voici un petit exemple de ce que vous pourriez réaliser :

Et sous vos yeux ébahis (si vous passez la souris au dessus de ce cadre) : tadam !

Et voici le code ayant permit cette prouesse esthétique :

#div_exemple {
    background-color: white;
    border: 1px solid black;
    width: 400px;
    height: 250px;
    padding:10px;
    /* Et là la seule ligne qui vous intéresse : */
    cursor:url(http://glob.bargeo.fr/wp-content/uploads/2009/09/elephant_php.png), auto;
}

Un commentaire

  • Pascaline (1 comments), le 13 septembre 2009

    Un peu gros ton éléphant !! Et au niveau de la précision, un éléphant ça trompe énormément !!!! lol

Poster un commentaire

Subscribe without commenting