Image qui bouge au clique !!!
Fermé
floflo55
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
-
19 déc. 2012 à 19:09
floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 - 20 déc. 2012 à 14:33
floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 - 20 déc. 2012 à 14:33
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
- Acronis true image - Télécharger - Sauvegarde
- Insérer une image dans word sans bouger le texte - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
4 réponses
vieuxpc
Messages postés
2715
Date d'inscription
lundi 10 mai 2004
Statut
Membre
Dernière intervention
25 janvier 2017
975
19 déc. 2012 à 20:03
19 déc. 2012 à 20:03
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
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
Modifié par inspiring le 19/12/2012 à 19:51
Modifié par inspiring le 19/12/2012 à 19:51
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
floflo55
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
4
19 déc. 2012 à 19:54
19 déc. 2012 à 19:54
Je n'ai jamais fait du CSS, peut tu m'aider un peut plus en me donnant un code. L'image que je veux faire bouger s'appelle 123.png
Un TRES grand merci d'avance
Un TRES grand merci d'avance
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
19 déc. 2012 à 20:34
19 déc. 2012 à 20:34
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é
floflo55
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
4
19 déc. 2012 à 20:49
19 déc. 2012 à 20:49
Comment dire... Tu ma 10000 de fois aidé :) Tout marche !!! Un très Grand MERCI ^^
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
19 déc. 2012 à 20:54
19 déc. 2012 à 20:54
lol, heureusement que ca marche sinon je ne t'aurais pas donner cet exemple.
Si ton idée est de créer un site ou juste quelques pages web, penche toi qd meme sur le CSS, ça te rendra pas mal de service.
Si ton idée est de créer un site ou juste quelques pages web, penche toi qd meme sur le CSS, ça te rendra pas mal de service.
floflo55
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
4
19 déc. 2012 à 20:56
19 déc. 2012 à 20:56
D'accord Merci (encore ^^) !!!
floflo55
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
4
19 déc. 2012 à 20:57
19 déc. 2012 à 20:57
Ha non attend il y a 2 problèmes
floflo55
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
4
19 déc. 2012 à 20:58
19 déc. 2012 à 20:58
P1: La transition ne marche pas
P2: je doit mettre ou l'adresse URL du site ou ça renvoie quand je clique dessus (sur l'image)
P2: je doit mettre ou l'adresse URL du site ou ça renvoie quand je clique dessus (sur l'image)
19 déc. 2012 à 20:08