Installer un curseur brillant animé sur un article seul ou sur le blog entier

Publié le par Nessa

On est beaucoup à vouloir changer cette banale flèche sur notre blog adoré mais entre le choix du curseur, comment le mettre, où trouver un beau curseur, c'est tout une expédition sur le net! vous ne trouvez pas ?

CQFD: les curseurs animés ne sont visibles que sous le navigateur Internet Explorer (A vérifier sur long terme).

 

Il existe plusieurs méthodes:


1) Méthode sans passer par le CSS avec un script  de chez totallyfreecursor 
L'url du curseur  vous est fourni en échange d'un rectangle pub sur votre site ...
*  choisissez votre curseur sur le site http://www.totallyfreecursors.com/ un choix immense !
* c'est en anglais ...mais très simple d'utilisation avec un script sans java script
si vous voulez un truc précis comme une coccinelle par exemple taper coccinelle dans google traduction ce qui vous donnera "lady bug" taper "lady bug" dans la recherche de totallyfreecursors
* puis copiez le  premier script proposé et collez dans un des modules libre de colonne ou entête  en html
*  on  peut mettre un curseur normal pour tout le blog et un autre curseur au survol des liens (2 ème script) il suffit de copier les 2 scripts différents l'un apres l'autre .... 
Inconvénients de cette méthode:
Laisse  un petit  rectangle publicitaire clignotant et  il me semble de plus que ça ralentit le chargement e la page ...
voir un exemple ici  knelle66.com chez Pearl qui fait de la délicieuse cuisine exotique avec un petit curseur hibiscus qui se change en palmier au survol des liens (réédit Pearl a du changer de design entre temps).

2) Méthode sans passer par le CSS avec un script dans une colonne ou article pour changer de curseur selon votre article du jour 
copiez et collez le script çi-dessous en html
<style type="text/css">body {cursor:url(url du curseur),auto;}</style>
et pour changer le curseur au survol des liens copiez ce code en html
<style>A:hover{cursor: url("url du curseur "), url("url du curseur "), auto;}</style>

3) Méthode pour changer le curseur ponctuellement
(voir tout en bas pour trouver des url de curseurs )
sous une image dans un article , colonne ...
voir l'image çi-dessous, passez le curseur dessus il va se changer en  ...
et si vous cliquez  vous mènera à tous mes voeux du premier mai :)
Comment j'ai fait ? j'ai copié en html de cet article le code çi-dessous en remplaçant les écritures rouges par mes url

<a style="cursor: url(url du curseur), url( url du curseur ), auto;" href="url de l'article ou de la page" target="_blank"><img   src="url de l'image" /></a>

4) méthode en passant  par le CSS
(voir tout en bas pour trouver des url de curseurs )
Il faut juste rajouter cette ligne 
body {cursor:url(url de mon curseur),auto; }
Conseil  avant de toucher à son CSS: Faites une sauvegarde de celui-ci.
Ma méthode: copier tout le CSS puis le coller dans un article brouillon avec pour titre "sauvegarde CSS daté du ...."

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Vous pouvez trouver des curseurs déjà tout fait sur le net ( ainsi que des codes à copier coller directement) en tapant curseur + chat par exemple .
Je vous recommande  le site de Gifman :)
http://gifs-et-compagnie.over-blog.com/article-menu-curseur-46637644.html
Vous pouvez même demander à Monsieur gifman de vous fabriquer un curseur à partir d'une de vos images :)

Partager cet article

Commenter cet article

Sagan33 01/05/2012 19:40


J'espère que tu as bien reçu ma réponse pour le curseur. Je ne vois pas mon com affiché... dis moi si tu n'as rien.


En attendant, qu'est-ce que les commentaires marchent mal. Je viens de recevoir un com du 24/04 !!!!!!!!et je n'en avais jamais eu connaissance... inutile de retourner dans le forum pour encore
se faire rabaisser alors on en reste là ! avec ce système à la manque

Sagan33 01/05/2012 19:37


Merci pour ton com Nessa, je savais que l'article t'intéresserait. Quand tu entends les toubibs, vu qu'ils déremboursent maintenant pour la circulation du sang, rien ne sert à rien dans ce
domaine. Alors il n'y a plus qu'à utiliser la phyto.


Pour le curseur, je n'utilise pas le html. En fait presqu'en tout je préfère agir sur le css. Tu copies ce code textuellement à la fin de ta css :



body    {cursor:url(adresse curseur du dessus),default;}
a:hover {cursor-image:url(adresse curseur du dessous, main par exemple),default;} 


Il faut bien regarder que ce soit la main qui donne le lien et non l'inverse. Si jamais c'était l'inverse, il suffit d'intervertir les url des curseurs.


Bisous à toi,


A bientôt. Geneviève

Floryne 01/05/2012 15:55


Merci pour toutes ces infos, je ne comprends pas encore tout mais je ne désespère pas.

MamanDouceur 22/04/2012 21:54

Bonjour ! où est-ce qu'on colle le code htlm stp ? je galère depuis cet aprem sur plusieurs sites et pas moyen :(

merci, super ton blog en tout cas !

bfrance 29/05/2011 06:15



Très joli le blog, merci de partager tous ces trucs.  France



un fruit vert 30/04/2011 22:17



C'est vraiment très joli.... Mignon tout plein!



helloiamkitty 30/04/2011 15:52



bonjoura vous et merci pour vos trucs et astucs



Mage 09/11/2009 00:03


kikoo je passe te voir et te dire merci, pour tout ce que tu mets pour aider les autres . je suis tombee par hasard chez toi mais j'aime beaucoup
bonne continuation.


soumiane 24/09/2009 18:32


Coucou , le curseur animé , pour mon blog , je peux le trouver ou stp .Chez clikpartou ce sont des curseurs pour les pc . Ton blog est super bien , bon , moi j' suis amateur de chez amateur hi hi
Bises


mimimarigny 27/06/2009 09:54

merci pour cet article,en moi, tu as fait une heureuse.je vais essayer tout cela.bises

cerisette 15/05/2009 20:12

j'ai toujours peur de toucher a a sourcebisouscerisette

Laure+H. 15/05/2009 11:01

Très jolie, ta petite rose... Elle ne marche pas avec firefox, mais avec l'ami explorer oui... un vrai petit plaisir, on va cliquer comme des fous! biz

miss28 15/05/2009 10:04

coucou, j'ai donc essayer mais je vois pas ou mettre le code htlm car j'ai mon entete et j'ai peur de tout rater (lol). Bisous et bonne journée.

floflo 15/05/2009 09:54

merci !mais comprends encore pas trop comment rentre code htlm!!!pff!petit jeu sur mon blog ce dimanche!bz! 

bacotte 15/05/2009 09:06

passe un bon vend.

ana paula 15/05/2009 04:43

Love your blog! Belle et délicate. embrasserAna Paula Bousquet