Une image en tête d'article qui change au passage de la souris.

Publié le par Coquelikosafrane



Un petit rappel pour Finou .

Ca vous intéresse de mettre une jolie petite image en tête de vos articles qui en plus peut être ou non changée lors du passage de la souris ??



.titreArticle{
...
background: url(adresse de votre icône ou clipart hébergé) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}
.titreArticle:hover {
background: url((adresse de votre icône ou clipart hébergé) ) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}





Par exemple :

.titreArticle{
...
background: url(
http://serv1.upload4you.free.fr/2007/07/1183812531.gif) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}
.titreArticle:hover {
background: url(
http://serv1.upload4you.free.fr/2007/07/1183812574.gif) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}

 

Publié dans Over blog

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
F
Merci, c'est gentil !BisousFinou
Répondre
J
Merci d'avoir repondu j'ai essayer mon titre change et viens comme le tiens mais l'image apparait pas j'ai meme essayer avec celui de ton blog et rien je sais plus quoi faire voici toute ma page de style y'a tu quelque chose qui cloche /* --------- Article --------- */ <br /> body { background: #A29F95; color: #272011; background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/263/autumn/article/common/http://fdata.over-blog.com/99/00/00/01/templates/263/autumn/article/common/pics/page_background.jpg); font-family: times, serif;font-size:12px; } a   { text-decoration:none; color:#FF8901; } a:hover { text-decoration:underline; color:#CA8510; }<br /> #top { padding: 60px 200px 13px 15px; text-align: left; font-style: italic; font-size: 30px; color: #2D0000; } #footer { clear:both; padding: 6px 7px 0 7px; color: #ECEAE4; } .box-titre  {}.beforeArticle  {}<br /> .contenuArticle, .extrait { color: #685C26; font-size: 14px; }<br /> .contenuArticle:first-letter, .extrait:first-letter { font-size: 20px; }.titreArticle{...background: url(http://serv1.upload4you.free.fr/2007/07/1183812531.gif) no-repeat scroll top left ;padding-left: 60px;padding-bottom : 45px;padding-top : 20px;}.titreArticle:hover {background: url(http://serv1.upload4you.free.fr/2007/07/1183812574.gif) no-repeat scroll top left ;padding-left: 60px;padding-bottom : 45px;padding-top : 20px;}<br /> .date { padding-bottom: 3px; font-size: 11px; color: #CA8510; } www.over-blog.ca.box { margin:auto; margin-bottom:15px; background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/263/autumn/article/common/pics/box_background.gif); background-color: #FCFAF1; border-right: 1px solid #ECEAE4; border-bottom: 1px solid #ECEAE4; }.box-content { padding: 6px 8px 3px 8px; background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/263/autumn/article/common/pics/box_backgroundtop.jpg); background-position: top left; background-repeat: repeat-x; color: #FF8901; }  <br /> .commentMessage { background: #FEFEFB; border-top: 1px solid #FF8901; border-bottom: 1px solid #FFC582; color: #685C26; }.commentOption { font-size: 10px; color: #CA8510; }.commentOption a  { text-decoration:none; color: #CA8510; }.commentOption a:hover  { text-decoration:underline; color: #272701; }<br /> .pageContent { color: #685C26; font-size: 14px; }<br /> .pageContent:first-letter { font-size: 20px; } .divPageTitle h2  { text-decoration:none; color:#685C26; } .divPageTitle h2:hover { text-decoration:underline; color:#272701; }
Répondre
J
j'essaie mais le petit bonhomme apparait pas peut tu m'aider je l'adore il est super et merci pour toute tes autre truc j'ai mit ton site dans mes favoris
Répondre