Image qui bouge au clique !!!
floflo55
Messages postés
221
Date d'inscription
Statut
Membre
Dernière intervention
-
floflo55 Messages postés 221 Date d'inscription Statut Membre Dernière intervention -
floflo55 Messages postés 221 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
j'aimerais savoir quel est la commande HTLM qui permet à une image de se lever quand on passe la sourie dessus et qui dirige vers un site web quand on clique dessus, comme en haut à droite du site https://www.commentcamarche.net/ !!!
Un très grand merci d'avance
j'aimerais savoir quel est la commande HTLM qui permet à une image de se lever quand on passe la sourie dessus et qui dirige vers un site web quand on clique dessus, comme en haut à droite du site https://www.commentcamarche.net/ !!!
Un très grand merci d'avance
A voir également:
- Image qui bouge quand on l'incline
- Image en 3d qui bouge - Télécharger - Thèmes & Fonds d'écran
- Image iso - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
4 réponses
salut!
tu trouveras des elements de reponse ici!
http://www.startyourdev.com/html/evenement-html-onmouseover
tu trouveras des elements de reponse ici!
http://www.startyourdev.com/html/evenement-html-onmouseover
floflo55
Messages postés
221
Date d'inscription
Statut
Membre
Dernière intervention
4
Merci beaucoup, je me pence dessus et je te tien au courant !!!
tu peux le faire en utilisant du CSS , avec les propriétés "transform" et "transition"
pour la redirection c'est simplement un lien comme pour un bouton
pour la redirection c'est simplement un lien comme pour un bouton
Si ca peut te rendre service :)
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(123.png);
background-repeat: no-repeat;
background-position: 0px 25px;
}
#bouton:hover {
background-repeat: no-repeat;
background-position: 0px 0px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 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
Si t'as des questions ...
Je trouve le CSS plus pratique que le javascript, mais c'est un avis perso
en espérant t'avoir aidé
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(123.png);
background-repeat: no-repeat;
background-position: 0px 25px;
}
#bouton:hover {
background-repeat: no-repeat;
background-position: 0px 0px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 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
Si t'as des questions ...
Je trouve le CSS plus pratique que le javascript, mais c'est un avis perso
en espérant t'avoir aidé