Image qui bouge au clique !!!
floflo55
Messages postés
271
Statut
Membre
-
floflo55 Messages postés 271 Statut Membre -
floflo55 Messages postés 271 Statut Membre -
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://abonnement.xiptv.shop/ !!!
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://abonnement.xiptv.shop/ !!!
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
- Légende image word - Guide
- Reduire taille image - Guide
- Image iso - Guide
- Acronis true image gratuit - 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
271
Statut
Membre
4
Merci beaucoup, je me pence dessus et je te tien au courant !!!
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é
