Image masquée en partie s'affiche au survol de la souris

Fermé
sihame - 24 déc. 2012 à 14:18
 sihame - 2 janv. 2013 à 11:23
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.




A voir également:

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
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
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
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!
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
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
parait! je vous remercie.