7 mars 2008 5 07 /03 /mars /2008 09:19

  
Vous désirez avoir des liens qui scintillent lorsque l'on passe au dessus avec le curseur de la souris ?
 
Suivez bien "pas à pas" ces explications et ce sera vite réalisé ...
 

  • Pour tous les niveaux de blog
    (confiance, privilège ou premium)  
     
  • Le scintillement des liens se réalise via une image animée, vous devez donc créer ou trouver l'image scintillante vous convenant, des petites étoiles, des bulles, des points, tout peut convenir selon le résultat que vous désirez, il vous faudra peut-être faire de nombreux essais avant de trouver l'image idéale, ne vous découragez pas.
     
  • Hébergez votre image dans vos répertoires, ou chez votre hébergeur habituel et copiez son adresse ( http://... )
    Ne prenez jamais, sauf autorisation, l'adresse de l'image de quelqu'un d'autre sur le net.
      
  • Allez dans la partie "design"
     
  • Cliquez sur "modifier le CSS"   
      
  • Cherchez, au début de votre CSS, la ligne
    a:hover {}
     
  • Entre les parenthèses, cette ligne contient peut-être déjà des informations diverses,  de couleur et soulignement de vos liens par xemple, vous allez ajouter, entre le point-virgule et la parenthèse de fin (a:hover { blablabla; ici }) le code suivant :
      
    background:url(http://adresse_de_votre_image);
      
    ((http://adresse_de_votre_image) étant l'adresse précédement copiée)
      
    ce qui donnera par exemple comme résultat:
    a:hover {
    text-decoration:none; color:#0033FF; background:url(http://idata.over-blog.com/0/09/71/etoiles.gif);}
      

Voilà, c'est déjà terminé, regardez votre blog, actualisez votre page et passez votre souris sur les liens pour admirer votre travail.
Si cela ne fonctionne pas, vérifiez bien chaque parenthèse, points-virgules ou autres signes, chacun ont leur importance. Vérifiez également l'adresse de votre image qui doit être correcte et complète.
 
Bonne chance
   

Partager cet article

Repost 0
Published by Farfouille - dans Design
commenter cet article

commentaires

Joe 01/01/2010 20:06


J'ai beau essayé, même avec ton code je n'y arrive pas, lol.
Bonne année au passage :)


maria 20/03/2009 09:35

je trouvais ce petit truc sympa... mais, snnniiifff, ça marche pas chez moi... j'ai du me planter mais je ne sais pas où...
voici donc ce que j'ai dans mon css:

a:hover { text-decoration:underline; color:#CA8510; background:url(http://idata.over-blog.com/2/06/31/35/clipart/7q66t1xv.gif);}

je ne vois pas ce qui cloche...

Merci quand même pour tout ces petits truc géniaux qui embellissent nos blog.
Bonne fin de journée. bises.

Jenifael 08/02/2009 14:35

Voici l'adresse :
http://idata.over-blog.com/2/35/37/94/planetes-etoiles-9.gif

Jenifael 06/02/2009 14:48

Non mon image GIF n'est pas animée, lorsque je regarde mon repertoire sur mon disque dur. Pourtant le format est bien en GIF ...

Aide Blog 07/02/2009 14:29


Peux-tu me donner l'adresse de ton image dans tes répertoires over-blog afin que je regarde ça ?
Tu vas dans le répertoire, clique sur la petite loupe de l'image et copie l'adresse que tu viens coller ici dans un commentaire.


Jenifael 20/12/2008 21:17

J'ai suivi a la lettre tes instructions pour les liens scintillants, tout fonctionne, je vois bien la nouvelle image apparaitre quand je survole le lien, mais ca ne clignote pas ... l'image est fixe et je ne vois pas pourquoi.

Aide Blog 27/01/2009 09:23


L'image est-elle correctement animée dans tes répertoires ?


Béré :0026: 29/09/2008 13:37

Bon ! Je vais essayer !

Farfouille 04/10/2008 13:55


Bonne chance  :-)


Nab 08/07/2008 15:07

Cool, voilà un tip qui me servira.
Merci pour ce blog très pratique!

pat 15/11/2007 21:09

Moi j'ai essayé, mais je n'ai pas réussi. Un glitter fait-il l'affaire comme image scintillante? Je ne sais pas quoi prendre. Merci de me donner un petit coup de main
Pat

CrepOsucre 28/04/2007 00:57

Ca fonctionne ! Super, merci beaucoup Farfouille, biz !

Marie 16/03/2007 21:14

Bonsoir, merci pour cette explication vraiment claire ! Par contre, le scintillant qui apparait dessous " commentaires" et "recommander" est vraiment bcp trop grand, puis je y remédier ?

merci pour l'aide que vous apportez.

Farfouille 18/03/2007 22:08

Bonsoir,Il faut modifier la valeur du "padding-top", qui est ici de 60pxdans cette partie du css :
.lienRecom {background: url(http://img243.imageshack.us/img243/2315/clrsquaryw7.gif) no-repeat bottom left ; padding-left : 20px; padding-top : 60px;}.lienCom {background: url(http://img243.imageshack.us/img243/2315/clrsquaryw7.gif) no-repeat bottom left ; padding-left : 20px; padding-top : 60px;}.linkcomment0 {background: url(http://img156.imageshack.us/img156/881/coeurrosexr2.gif) no-repeat bottom left ; padding-left : 40px; padding-top : 60px;}

Marie 16/03/2007 17:32

Merci bcp pour cette explication trés claire.
Par contre, quand je vais sur "commentaires" ou "recommander" c'est vraiment bcp trop grand ! Y a t-il une solution ? Merci

Marie 27/11/2006 10:37

Merci pour ton aide! en fait ce que je cherche à faire c'est d'avoir en bas de page ça:
page précédente 1-2-3-4-5 page suivante

tu préfère peut-être que je te donne mon mail pour ces petites questions?

Marie 22/11/2006 10:12

Merci pour l'aide!!!
J'ai encore plein d'autres questions... j'ai déjà essayé de changer les couleurs et types de police et les couleurs de pas mal de trucs sur mon blog, mais ça ne marche jamais.........
Tant que j'y suis dans les questions, existe un programme photo équivalent photofiltre mais pour mac?
MERCI!!!

Farfouille 22/11/2006 11:30

Si tu est arrivée à mettre les images pour le survol des liens, tu arriveras aussi à changer le reste, patience et persévérance  ;-)Si tu n'y arrive vraiment pas du tout, dis-moi ce que tu désires changer exactement, je te dirai (si je connais la réponse) quel code modifier ou ajouter.Pour les logiciels fonctionnant sous mac, je n'ai vraiment aucune idée de quoi te conseiller car je n'ai jamais utilisé de mac, mais une petite recherche google m'a fait trouver ceci, à toi de tester : http://www.clubic.com/logiciel-mac-285-0-2-retouche-photo.html

Marie 21/11/2006 20:33

ben moi ça ne marche pas, pourtant j'ai respecté à la lettre toutes les instructions...
a:hover {text-decoration:none; color:#666666; background:url(http://ddata.over-blog.com/xxxyyy/0/14/24/30/etoile-167.gif);}
Y-A-t'il une erreur dans mon code?
Merci pour l'aide!!!!!!!

Farfouille 21/11/2006 21:00

Ton code est correct, je viens de le tester sur un blog à moi pour en être certaine, et tu l'a placé au bon endroit dans ton CSS ... il doit y avoir quelque chose qui bloque ,quelque part dans ton CSS, mais je ne vois rien ... ou tu es tombée en plein dans un trou de maintenance et la modification apparaitra plus tard.
Tente de revalider ton CSS ou éditer un article et le revalider, parfois ça débloque les choses.
Si dans quelques heures ce n'est toujours pas là (pense à actualiser ta page en vérifiant), demande de l'aide sur le forum, ton CSS sera examiné à la loupe par quelqu'un de plus compétant que moi.
Bonne chance
 
[EDIT]
Mais non, suis-je bête ... si, cela fonctionne, mais comme le haut à gauche de ton image est blanc, cela ne se voit que sur les plus longs liens !!!
C'est en faisant un petit tour sur ton blog que j'y ai pensé !
pfff, c'était tout simple et je me prenais la tête, lol ... choisis une autre image tout simplement
 

tine 28/09/2006 20:45

C'est fou comme les choses semblent si compliquées quand on commence et qu'après certaines explications comme celle-ci semblent si simples ! bonne soirée

Recherche

test du compteur

Il y a actuellement    personnes connectées à Over-Blog dont    sur ce blog