Image qui tourne au survol
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Image qui tourne au survol
Il y a un code poue faire tourner les images comme avec cette image.
Quand on passe la souris dessus l'image tourne, je cherche justement ça depuis 2 semaines.
Quand on passe la souris dessus l'image tourne, je cherche justement ça depuis 2 semaines.
Invité- Invité
Re: Image qui tourne au survol
Est-ce que ça t'écorcherait de dire bonjour ?? On est pas des robots, hein.
Un tutoriel sur le Net :
http://www.webdesignweb.fr/web/css-3-transform-rotation-et-echelle-766
Un tutoriel sur le Net :
http://www.webdesignweb.fr/web/css-3-transform-rotation-et-echelle-766
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Image qui tourne au survol
DésoléMatriochka a écrit:Est-ce que ça t'écorcherait de dire bonjour ?? On est pas des robots, hein.
Un tutoriel sur le Net :
http://www.webdesignweb.fr/web/css-3-transform-rotation-et-echelle-766
Bonjour
Invité- Invité
Re: Image qui tourne au survol
Sa ne marche pas
Invité- Invité
Réponse
Je ne sais pas comment mettre du css sur mon forum
forum php2
Voici se que ça donne:http://creabrick.forumactif.org/
var jaaspeel = new Object(); jaaspeel.ad_url = escape('http://forumdesguitaristes.forumsmusic.com/'); jaaspeel.small_path = 'http://perso.numericable.fr/antonywar/small.swf'; jaaspeel.small_image = escape('https://2img.net/r/hpimg15/pics/831160tournepage.png'); jaaspeel.small_width = '100'; jaaspeel.small_height = '100'; jaaspeel.small_params = 'ico=' + jaaspeel.small_image; jaaspeel.big_path = 'http://perso.numericable.fr/antonywar/large.swf'; jaaspeel.big_image = escape('https://2img.net/r/hpimg15/pics/491978tournepage2.png'); jaaspeel.big_width = '650'; jaaspeel.big_height = '650'; jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url; function sizeup987(){ document.getElementById('jcornerBig').style.top = '0px'; document.getElementById('jcornerSmall').style.top = '-1000px'; } function sizedown987(){ document.getElementById("jcornerSmall").style.top = "0px"; document.getElementById("jcornerBig").style.top = "-1000px"; } jaaspeel.putObjects = function () { // document.write('
'); // object document.write(''); // object params document.write(' '); document.write(' '); document.write(' '); document.write(' '); document.write(' '); // embed document.write(''); document.write('
'); document.write(''); // // document.write('
'); // object document.write(''); // object params document.write(' '); document.write(' '); document.write(' '); document.write(' '); document.write(' '); // embed document.write(''); document.write('
Image = mon avatar
forum php2
Voici se que ça donne:http://creabrick.forumactif.org/
var jaaspeel = new Object(); jaaspeel.ad_url = escape('http://forumdesguitaristes.forumsmusic.com/'); jaaspeel.small_path = 'http://perso.numericable.fr/antonywar/small.swf'; jaaspeel.small_image = escape('https://2img.net/r/hpimg15/pics/831160tournepage.png'); jaaspeel.small_width = '100'; jaaspeel.small_height = '100'; jaaspeel.small_params = 'ico=' + jaaspeel.small_image; jaaspeel.big_path = 'http://perso.numericable.fr/antonywar/large.swf'; jaaspeel.big_image = escape('https://2img.net/r/hpimg15/pics/491978tournepage2.png'); jaaspeel.big_width = '650'; jaaspeel.big_height = '650'; jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url; function sizeup987(){ document.getElementById('jcornerBig').style.top = '0px'; document.getElementById('jcornerSmall').style.top = '-1000px'; } function sizedown987(){ document.getElementById("jcornerSmall").style.top = "0px"; document.getElementById("jcornerBig").style.top = "-1000px"; } jaaspeel.putObjects = function () { // document.write('
'); // object document.write(''); // object params document.write(' '); document.write(' '); document.write(' '); document.write(' '); document.write(' '); // embed document.write(''); document.write('
'); document.write(''); // // document.write('
'); // object document.write(''); // object params document.write(' '); document.write(' '); document.write(' '); document.write(' '); document.write(' '); // embed document.write(''); document.write('
Image = mon avatar
Invité- Invité
Re: Image qui tourne au survol
Rebonjour =)
Donc déjà je vais essayer de mieux cerner votre souci, vous souhaitez que sur tous les avatars, il y ait cet effet "rotation"? Ou juste sur une image en particulier? ^^
Donc déjà je vais essayer de mieux cerner votre souci, vous souhaitez que sur tous les avatars, il y ait cet effet "rotation"? Ou juste sur une image en particulier? ^^
Re: Image qui tourne au survol
Mon avatar ^^
Invité- Invité
Re: Image qui tourne au survol
Tu ne peux pas appliquer cet effet à un seul avatar, c'est tous les avatars du forum ou aucun. Tout simplement parce que forumactif va générer un code général pour l'affichage des avatars.
Invité- Invité
Re: Image qui tourne au survol
Bon ok on attaque alors!
Je vais essayer de faire ça sans toucher au html et aux templates, ca sera plus simple
D'abord: Panneau d'administration > Affichage > Couleurs
et là tu cliques sur Feuille de style Css
Là on a un bloc note.
Les avatars se trouvent dans une span dont la class est postdetails
on écrit donc:
Et là surtout on ENREGISTRE !
:hover signifie quand on passe la souris dessus. Transform indique le type de tranformation à faire (tu peux changer le nombre de degré de la rotation) et transition est là pour nous indiquer le temps de la transtion et d'autre trucs dont tu ne t'occupes pas. =P Ces deux propriétés sont en 5 exemplaires afin qu'elles marchent sur tous les navigateurs.
Si tu veux plus d'explication pour comprendre n'hésite pas à demander, mais généralement les gens s'en fichent une fois qu'ils ont leur code ^^'
Voilà
Je vais essayer de faire ça sans toucher au html et aux templates, ca sera plus simple
D'abord: Panneau d'administration > Affichage > Couleurs
et là tu cliques sur Feuille de style Css
Là on a un bloc note.
Les avatars se trouvent dans une span dont la class est postdetails
on écrit donc:
- Code:
.postdetails img:nth-child(5):hover {
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transition-property: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
}
Et là surtout on ENREGISTRE !
:hover signifie quand on passe la souris dessus. Transform indique le type de tranformation à faire (tu peux changer le nombre de degré de la rotation) et transition est là pour nous indiquer le temps de la transtion et d'autre trucs dont tu ne t'occupes pas. =P Ces deux propriétés sont en 5 exemplaires afin qu'elles marchent sur tous les navigateurs.
Si tu veux plus d'explication pour comprendre n'hésite pas à demander, mais généralement les gens s'en fichent une fois qu'ils ont leur code ^^'
Voilà
Invité- Invité
Re: Image qui tourne au survol
Je ne vois pas le css dans le code source. Tu as bien enregistrer?
Si tu reviens dans la feuille de style le css y est toujours?
Si tu reviens dans la feuille de style le css y est toujours?
Re: Image qui tourne au survol
Tu peux vérifier, tu meme etre admin de mon forum tu verras je l'ai mis il y a t'il un truc pour désactiver le css ?
peut-être que je ne l'ai pas décocher .
Mais je l'ai mis et sa ne marche pas
peut-être que je ne l'ai pas décocher .
Mais je l'ai mis et sa ne marche pas
Invité- Invité
Re: Image qui tourne au survol
C'est bon il est dans le code maintenant
Tu as juste oublier le point devant postdetails:
.postdetails img:nth-child(5):hover
Ps: ne jamais mettre admin un inconnu! Même pour de l'aide, tu risques de perdre ton forum!
Tu as juste oublier le point devant postdetails:
.postdetails img:nth-child(5):hover
Ps: ne jamais mettre admin un inconnu! Même pour de l'aide, tu risques de perdre ton forum!
Re: Image qui tourne au survol
Oui mais meme avec le point sa ne marche pas
http://creabrick.forumactif.org/
Mais regarde j'ai mis exactemment se que tu as mis
.postdetails img:nth-child(5):hover {
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transition-property: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
}
http://creabrick.forumactif.org/
Mais regarde j'ai mis exactemment se que tu as mis
.postdetails img:nth-child(5):hover {
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transition-property: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
}
Invité- Invité
Re: Image qui tourne au survol
Je suis allée sur ton forum et tout marche =)
http://creabrick.forumactif.org/t2-mon-raid-sur-l-enfer#4
passe la souris sur ironman ^^
http://creabrick.forumactif.org/t2-mon-raid-sur-l-enfer#4
passe la souris sur ironman ^^
Re: Image qui tourne au survol
Je ne vois rien il n'y a rien qui change ?
Invité- Invité
Re: Image qui tourne au survol
J'ai essayé sur un autre ordi, demander à un ami. Et ça marche chez les deux.
J'ai testé sur chrome, firefox et opéra.
Quel navigateur utilises tu?
Edit: si tu te déconnectes et que tu essayes en tant qu'invité ça ne marche toujours pas?
Si le problème vient de là on passe par le template ^^
(j'ai voulu faire ma flemmarde, je crois que je vais pas y couper xD )
J'ai testé sur chrome, firefox et opéra.
Quel navigateur utilises tu?
Edit: si tu te déconnectes et que tu essayes en tant qu'invité ça ne marche toujours pas?
Si le problème vient de là on passe par le template ^^
(j'ai voulu faire ma flemmarde, je crois que je vais pas y couper xD )
Re: Image qui tourne au survol
Firefox,Chrome,Opera,Explorer.
Sa vien des admin, car j'ai essayé en tant qu'invité sa marche mais pas en admin
Sa vien des admin, car j'ai essayé en tant qu'invité sa marche mais pas en admin
Invité- Invité
Re: Image qui tourne au survol
bonjour
essaie avec
.imageavatar img:hover { toutes les transformations mises plus haut }
essaie avec
.imageavatar img:hover { toutes les transformations mises plus haut }
Re: Image qui tourne au survol
Non ça ne va pas marcher (Fleodax peut toujours essayé ^^' ) parce qu'il n'a pas la classe imageavatar (c'est pour ça que j'ai essayé de contourner avec un selecteur d'enfant tel que nth-child). Il faut passer par les templates (mais j'ai voulu tenter le coup du selecteur par flemme =p). Donc:
PA > affichage > Templates > General
et là tu cliques sur viewtopic_body
recherche:
que tu remplaces par:
Puis surtout on et arrivé sur la page des différents templates, on VALIDE (cette étape est très importante car sans la validation ça ne changera rien)
ensuite dans la feuille de style css, supprime le code précédent et mets celui ci:
Voilà
PA > affichage > Templates > General
et là tu cliques sur viewtopic_body
recherche:
- Code:
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
que tu remplaces par:
- Code:
{postrow.displayed.RANK_IMAGE}<div class="avatarpost">{postrow.displayed.POSTER_AVATAR}</div><br /><br />
Puis surtout on et arrivé sur la page des différents templates, on VALIDE (cette étape est très importante car sans la validation ça ne changera rien)
ensuite dans la feuille de style css, supprime le code précédent et mets celui ci:
- Code:
.avatarpost img:hover {
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transition-property: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
}
Voilà
Re: Image qui tourne au survol
Merci Izumi375 !!
Tu as réussie
Tu as réussie
Invité- Invité
Re: Image qui tourne au survol
Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
A bientôt sur ForumActif |
Sujets similaires
» Problème au survol d'une image
» Changement d'image au survol
» Modification d'une image au survol de la souris
» Arranger un code de survol d'image
» Effet sur image lors du survol de la souris
» Changement d'image au survol
» Modification d'une image au survol de la souris
» Arranger un code de survol d'image
» Effet sur image lors du survol de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum