Comment personnaliser un curseur

Pour personnaliser le curseur (habituellement une petite flèche ou une main situant la souris sur votre écran), il faut tout d'abord avoir une image avec une extension en .cur ou .ani (cette dernière pour les curseurs animés) et l'héberger par exemple sur un site comme
http://www.photomaniak.com/upload/index.php
ou
http://imageshack-france.com/index.php
les hébergeurs ne manquent pas et on en trouve beaucoup en cherchant avec Google.

Mais si vous avez une image avec l'extension en .ico cela fonctionne tout aussi bien.

Vous pouvez aussi trouver des adresses de curseurs sur des sites, au cas où la fabrication de l'image vous soit impossible, de nombreux choix sont  ici par exemple :
http://patmax.info/curseurs/a.php  où vous retrouvez les explications pour insérer un curseur dans votre blog ou site.

Vous placerez l'adresse de votre image dans le code suivant :

cursor: url(http://votre-image.ani),default;   

Et si vous désirez que votre curseur ait une autre forme ou image au survol des liens d'une page internet, vous placerez une seconde adresse d'image dans ce même code qui sera placé ailleurs  :

cursor: url(http://votre-deuxième-image.cur),default;

Il faut insérer ces deux codes dans votre feuille de style dans la partie body dont voici un extrait pour vous permettre de bien visualiser, les lignes à ajouter sont en rouge :


body {
background:#ffffff;
text-align:center;
margin:0 0 0 0;
padding:0 0 0 0;
color:#000000;
font-size: 10pt;
font-family:Arial;
cursor: url(http://votre-image.ani),default;    
}

a { cursor: url(http://votre-deuxième-image.cur),default;}


Le code est mis dans la partie 'body', avant la dernière accolade, est le curseur principal.

Le code ajouté sous la dernière accolade de la partie 'body' et à l'intérieur d'une ligne commençant par 'a {' est le curseur qui sera visible au survol des liens par la souris.
N'oubliez pas de fermer la ligne par } sinon vous ne verrez pas le curseur personnalisé.



Les extensions proposées pour les curseurs sont à titre d'exemple.

Les codes couleurs de cette partie de css sont donnés à titre d'exemple, veillez à ne pas modifier vos codes couleurs ni aucun des paramètres de votre css au risque de devoir le refaire.

Prenez toujours votre temps quand vous ajoutez quelque chose dans votre feuille de style, relisez avant de valider le css, et surtout faites une copie de votre feuille de style dans votre  bloc-note afin d'utiliser cette sauvegarde si par hasard vous commettiez une erreur dont vous n'auriez connaissance qu'après la validation (en regardant votre blog).
Ceci évite le stress et le dépit !




11/12/2007
0 Poster un commentaire

A découvrir aussi