Image qui bouge au clique !!!
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
4 réponses
-
salut!
tu trouveras des elements de reponse ici!
http://www.startyourdev.com/html/evenement-html-onmouseover -
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 -
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é -
utilise Javascript, c'est mieux
