Un joli champ de fermeture pour vos pop-ups
Utilisation simple des CSS et de JavaScript pour mettre en valeur un lien…
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”