Image qui tourne au survol

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 16:00

Il y a un code poue faire tourner les images comme avec cette image.
Image qui tourne au survol Facebook10
Quand on passe la souris dessus l'image tourne, je cherche justement ça depuis 2 semaines.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Matriochka Lun 22 Juil 2013 - 16:08

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
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 16:09

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
Désolé Sad
Bonjour Very Happy
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 16:27

Sa ne marche pas Sad
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Réponse

Message par Invité Lun 22 Juil 2013 - 18:27

Je ne sais pas comment mettre du css sur mon forum Sad
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 Smile
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Izumi375 Lun 22 Juil 2013 - 18:31

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? ^^
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 18:37

Mon avatar ^^
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Izumi375 Lun 22 Juil 2013 - 18:45

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.
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 18:47

ok tous
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Izumi375 Lun 22 Juil 2013 - 19:19

Bon ok on attaque alors!
Je vais essayer de faire ça sans toucher au html et aux templates, ca sera plus simple Wink

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à Mr. Green
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 19:29

Se ne marche pas regarde Sad
J'ai fait ce que tu m'as dit .
http://creabrick.forumactif.org/
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Izumi375 Lun 22 Juil 2013 - 19:35

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?
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 19:46

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 Sad
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Izumi375 Lun 22 Juil 2013 - 19:56

C'est bon il est dans le code maintenant Wink

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!
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 20:05

Oui mais meme avec le point sa ne marche pas Sad
http://creabrick.forumactif.org/
Mais regarde j'ai mis exactemment se que tu as mis Sad
.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;
        }
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Izumi375 Lun 22 Juil 2013 - 20:08

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 ^^
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Lun 22 Juil 2013 - 20:23

Je ne vois rien il n'y a rien qui change ? Sad
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Izumi375 Lun 22 Juil 2013 - 22:27

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 )
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Mar 23 Juil 2013 - 8:57

Firefox,Chrome,Opera,Explorer.
Sa vien des admin, car j'ai essayé en tant qu'invité sa marche mais pas en admin Sad
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Anya31 Mar 23 Juil 2013 - 11:42

bonjour

essaie avec
.imageavatar img:hover { toutes les transformations mises plus haut }
Anya31

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image qui tourne au survol

Message par Izumi375 Mar 23 Juil 2013 - 12:09

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:

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 :enreg: et arrivé sur la page des différents templates, on VALIDE Ajout (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à Mr. Green 
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Invité Mar 23 Juil 2013 - 13:45

Merci Izumi375 !!
Tu as réussie Smile
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui tourne au survol

Message par Chacha Mar 23 Juil 2013 - 13:50

Image qui tourne au survol Check10Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur Image qui tourne au survol Envoi10


A bientôt sur ForumActif Smile
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum