A voir également:
- Image masquée en partie s'affiche au survol de la souris
- Quelle touche pour débloquer la souris ? - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Image libre de droit gratuite google - Guide
4 réponses
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
24 déc. 2012 à 14:37
24 déc. 2012 à 14:37
Il y a eu la meme question il y a peu de temps :)
Le code CSS à insérer dans ta page web, entre les balises <head> et </head> :
<style type="text/css">
#bouton {
width:20px;
height:50px;
background-image:url(tonimage.png);
background-repeat: no-repeat;
background-position: 0px 25px;
}
#bouton:hover {
background-repeat: no-repeat;
background-position: 0px 0px;
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition: 2s; /* Safari and Chrome */
-o-transition: 2s; /* Opera */
}
</style>
Le code HTML à intégrer entre les balises <body> et </body> :
<a href="url de redirection"><div id="bouton"></div></a>
Les explications :
Tu définis width et height (largeur et hauteur) comme tu veux
background-position défini la position de ton image au repos et au survol, a toi de définir tes paramètres. la première valeur est l'alignement sur X et la seconde l'alignement sur Y
la propriété transition ne fonctionne pas sous Internet Explorer, l'effet se fera quand meme mais sans tenir compte du temps indiquer. En ce qui concerne ce délai, a toi de voir
Le code CSS à insérer dans ta page web, entre les balises <head> et </head> :
<style type="text/css">
#bouton {
width:20px;
height:50px;
background-image:url(tonimage.png);
background-repeat: no-repeat;
background-position: 0px 25px;
}
#bouton:hover {
background-repeat: no-repeat;
background-position: 0px 0px;
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition: 2s; /* Safari and Chrome */
-o-transition: 2s; /* Opera */
}
</style>
Le code HTML à intégrer entre les balises <body> et </body> :
<a href="url de redirection"><div id="bouton"></div></a>
Les explications :
Tu définis width et height (largeur et hauteur) comme tu veux
background-position défini la position de ton image au repos et au survol, a toi de définir tes paramètres. la première valeur est l'alignement sur X et la seconde l'alignement sur Y
la propriété transition ne fonctionne pas sous Internet Explorer, l'effet se fera quand meme mais sans tenir compte du temps indiquer. En ce qui concerne ce délai, a toi de voir
sissi481
Messages postés
1
Date d'inscription
lundi 24 décembre 2012
Statut
Membre
Dernière intervention
24 décembre 2012
24 déc. 2012 à 21:41
24 déc. 2012 à 21:41
Merci beaucoup pour cette réponse.
Mais je travaille sur dreamweaver, donc je n'ai pas de balise <head> et </head> ds ma css car j'utilise des feuilles css externes au code html.
Donc comment intégrer ce code séparemment?
Merci encore et bonnes fêtes!
Mais je travaille sur dreamweaver, donc je n'ai pas de balise <head> et </head> ds ma css car j'utilise des feuilles css externes au code html.
Donc comment intégrer ce code séparemment?
Merci encore et bonnes fêtes!
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
26 déc. 2012 à 14:44
26 déc. 2012 à 14:44
Mais je travaille sur dreamweaver, donc je n'ai pas de balise <head> et </head> ds ma css car j'utilise des feuilles css externes au code html.
rien a voir avec Dreamweaver, il n'y a jamais de balise <head> dans une feuille CSS, elle sont spécifique au page HTML
avec une feuille externe, tu colle ca :
#bouton {
width:20px;
height:50px;
background-image:url(tonimage.png);
background-repeat: no-repeat;
background-position: 0px 25px;
}
#bouton:hover {
background-repeat: no-repeat;
background-position: 0px 0px;
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition: 2s; /* Safari and Chrome */
-o-transition: 2s; /* Opera */
}
dans la feuille css
et ca :
<a href="url de redirection"><div id="bouton"></div></a>
dans ta feuille html (en n'oubliant pas d'appeler la feuille css contenant l'id concerné)
après j'ai mis un id, ce peut tres bien etre une class, à toi de voir
rien a voir avec Dreamweaver, il n'y a jamais de balise <head> dans une feuille CSS, elle sont spécifique au page HTML
avec une feuille externe, tu colle ca :
#bouton {
width:20px;
height:50px;
background-image:url(tonimage.png);
background-repeat: no-repeat;
background-position: 0px 25px;
}
#bouton:hover {
background-repeat: no-repeat;
background-position: 0px 0px;
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition: 2s; /* Safari and Chrome */
-o-transition: 2s; /* Opera */
}
dans la feuille css
et ca :
<a href="url de redirection"><div id="bouton"></div></a>
dans ta feuille html (en n'oubliant pas d'appeler la feuille css contenant l'id concerné)
après j'ai mis un id, ce peut tres bien etre une class, à toi de voir
