picture picture
mars 22, 2005 CSS 0 Commentaire

Un joli champ de fermeture pour vos pop-ups

Utilisation simple des CSS et de JavaScript pour mettre en valeur un lien…

Voir un exemple

Voici un style CSS à appliquer à votre bouton de fermeture.
Il est à insérer soit dans le head de votre page, soit (mieux!) dans une feuille .css externe liée au pop-up.

 a#close:link, a#close:visited, a#close:active, a#close:hover {   margin: 1px;   padding: 4px;   padding-left: 20px;   font-family: Verdana, Arial, sans-serif;   font-size: 8pt;   text-decoration: none;   background-color: white;   background-position: 2px 50%;   background-repeat: no-repeat;   background-attachment: scroll;   display: block;   width: 50px;   height: 20px; } a#close:link, a#close:visited, a#close:active {   border: 1px solid white;   color: #3a6ea5;   background-color: transparent;   background-image: url('close1.png'); } a#close:hover {   border: 1px solid #ff8000;   color: #ff8000;   background-color: #ffeec2;   background-image: url('close2.png'); } 

Mettez ensuite les 2 images close1.png et close2.png dans le dossier de votre choix (adaptez éventuellement le chemin ci-dessus) :

Il ne reste qu’a appliquer ce style, dans le body, à un lien de fermeture ayant un id= »close » :

<a id="close" title="Fermer la fenêtre" href="javascript:close();">Fermer</a>

Ce style peut être appliqué à tous types de liens. A vous d’adapter également les couleurs à vos chartes graphiques …

;)

No Responses to “Un joli champ de fermeture pour vos pop-ups”

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: