Image qui tourne au survol

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

Résolu Image qui tourne au survol

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

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.

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Matriochka le 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

Matriochka
+ Hyperactif +

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é le 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

Invité
Invité


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

Résolu Re: Image qui tourne au survol

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

Sa ne marche pas Sad

Invité
Invité


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

Résolu Réponse

Message par Invité le 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('http://img15.hostingpics.net/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('http://img15.hostingpics.net/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

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Izumi375 le 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
****

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é le Lun 22 Juil 2013 - 18:37

Mon avatar ^^

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Izumi375 le 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
****

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é le Lun 22 Juil 2013 - 18:47

ok tous

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Izumi375 le 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
****

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é le 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/

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Izumi375 le 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
****

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é le 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

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Izumi375 le 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
****

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é le 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;
        }

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Izumi375 le 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
****

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é le Lun 22 Juil 2013 - 20:23

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

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Izumi375 le 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
****

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é le 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

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Anya31 le Mar 23 Juil 2013 - 11:42

bonjour

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

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 le 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
****

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é le Mar 23 Juil 2013 - 13:45

Merci Izumi375 !!
Tu as réussie Smile

Invité
Invité


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

Résolu Re: Image qui tourne au survol

Message par Chacha le Mar 23 Juil 2013 - 13:50

Bonjour,

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


A bientôt sur ForumActif Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

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

http://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


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