Image masquée en partie s'affiche au survol de la souris
sihame
-
sihame -
sihame -
Bonjour à tous,
Je cherche à obtenir de l'aide dans la création de mon site.
Voici mon problème:
J'ai une petite icône facebook qui apparaît en partie sur mon site. Je l'ai placée tout à droite de l'écran. Je souhaiterais que lorsque l'internaute survol cette icône facebook, celle-ci apparaisse en entier.
Et qu'une fois que la souris ne survole plus mon image, celle-ci revient à sa position initiale.
C'est un peu le même effet que l'on retrouve sur le site commentçamarche.net, en haut à droite avec les boutons de réseaux sociaux.
Quelqu'un pourrait-il me donner la marche à suivre, car j'ai beau chercher sur le net, je ne trouve aucun tuto qui corresponde à cet effet.
Je ne sais pas s'il faut avoir recours au javascript, ou si une propriété css suffit.
Merci pour votre aide.
Je cherche à obtenir de l'aide dans la création de mon site.
Voici mon problème:
J'ai une petite icône facebook qui apparaît en partie sur mon site. Je l'ai placée tout à droite de l'écran. Je souhaiterais que lorsque l'internaute survol cette icône facebook, celle-ci apparaisse en entier.
Et qu'une fois que la souris ne survole plus mon image, celle-ci revient à sa position initiale.
C'est un peu le même effet que l'on retrouve sur le site commentçamarche.net, en haut à droite avec les boutons de réseaux sociaux.
Quelqu'un pourrait-il me donner la marche à suivre, car j'ai beau chercher sur le net, je ne trouve aucun tuto qui corresponde à cet effet.
Je ne sais pas s'il faut avoir recours au javascript, ou si une propriété css suffit.
Merci pour votre aide.
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
- Faites en sorte que la cellule a1 affiche exactement ce qui est montré sur cette image. quel mot apparaît en b1 ? - Forum Excel
- Faites en sorte que la cellule a1 affiche exactement ce qui est montré sur cette image - Forum Excel
- Afficher ligne masquée excel ✓ - Forum Excel
4 réponses
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
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!
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