AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Dévoiler la feuille de personnage cachée, avec un effet déroulant.

    Partagez
    Invité

    le Ven 23 Nov 2012 - 16:50

    Bonjour, bonsoir !

    Alors je m'essaye à mon premier tuto ! Je vais vous proposer quelque chose qui, il me semble, n'a pas encore été soumis, à savoir cacher votre feuille de personnage pour ensuite la dévoiler avec un effet de déroulement fluide au passage de la souris sur une image.

    Cette astuce peut bien sûr être utilisée pour cacher également tout le profil sous l'avatar et bien d'autres choses ! Mais comme on trouve assez souvent des feuilles de personnage cachées grâce à un bouton et qui s'affiche d'un coup en cliquant dessus, j'ai voulu quelque chose de plus progressif.

    Exemple (l'image est animée, elle peut mettre un peu de temps à charger) : http://img30.imageshack.us/img30/7453/5v8.gif

    Si vous voulez apprendre à réaliser le même effet sur vos forums, postez à la suite pour lire le reste du tuto, merci =)



    Voilà, j'espère que cette astuce vous sera utile et vous plaira, si vous avez des questions ou des problèmes avec le code, n'hésitez pas !  :friends:
    N'oubliez pas de créditer Never-Utopia si vous utilisez ce codage, merci.


    Dernière édition par Sycophante le Lun 9 Fév 2015 - 22:17, édité 9 fois
    Okhmhaka
    FémininAge : 31Messages : 31708

    le Ven 23 Nov 2012 - 17:01

    Salut !

    Merci pour le partage de ce tutoriel Very Happy. C'est dommage que tu n'aies pas mis d'image-exemple, les gens aiment bien visualiser ce que ça donne concrètement... J'ai moi-même du lire le code car je n'avais pas saisi quelle était l'image, si tu utilisais l'avatar pour masquer le profil ou si c'était autre chose.
    C'est une bonne idée en tout cas et c'est gentil de ta part de le mettre à disposition, je t'en remercie x).



    Invité

    le Ven 23 Nov 2012 - 17:05

    Je vais rajouter un lien d'ici ce soir pour qu'on puisse mieux visualiser, j'ai fais des petites manip sur mon forum test qui ont rendu ce code assez instable xD Donc, une fois que j'aurais corrigé cela, je pourrai proposer un exemple concret. =)
    Okhmhaka
    FémininAge : 31Messages : 31708

    le Ven 23 Nov 2012 - 17:09

    Parfait, je te remercie x).



    Invité

    le Ven 23 Nov 2012 - 18:32

    Comme promis, j'ai édité le tuto pour y mettre un lien afin de mieux visualiser le résultat. Wink
    Okhmhaka
    FémininAge : 31Messages : 31708

    le Sam 24 Nov 2012 - 0:24

    C'est nickel ! Je pense que les gens visualiseront mieux ainsi, c'est plus attrayant également. Merci beaucoup Very Happy



    Invité

    le Sam 24 Nov 2012 - 2:31

    Ce n'est pas grand chose ^^ Après tout, si j'ai réussi à faire ça, c'est en partie grâce à ce que j'ai appris ici via les tutos des membres donc si je peux rendre un peu l'appareil, hein =)
    Okhmhaka
    FémininAge : 31Messages : 31708

    le Sam 24 Nov 2012 - 12:25

    N'empêche que peu de personnes prennent la peine de le faire, donc les remerciements sont largement mérités, ça fait plaisir x)



    Electro
    FémininAge : 20Messages : 30

    le Sam 24 Nov 2012 - 15:12

    merci
    Suika
    FémininAge : 22Messages : 28

    le Mar 27 Nov 2012 - 20:48

    trop cool *-* je cherchais ce code depuis des jouuuuurs!

    Edit : c'est normal que ça ne marche pas du tout chez moi ? ^^' J'ai tout fait comme tu avais dit, et mon image (même si elle fait 50px de hauteur) est toute grande ? et on ne voit pas les infos de la feuille de personnage ^^''
    Invité

    le Mar 27 Nov 2012 - 21:17

    Ah, ça me l'a fait aussi une fois pour l'image qui grossie, j'avais limité les images du profil à 200px de largeur et ça avait donc élargie l'image pour la feuille. Pour régler ça, j'ai tout simplement édité ma template, là où tu places ton image et j'ai ajusté la largeur, comme ceci :
    Code:
    <img src="URL DE VOTRE IMAGE" style="width: largeur de l'image en pixel;">

    Le pb était réglé. Pour t'aider pour le reste, j'ai besoin de plus d'infos, car je ne vois pas quel peut être le soucis =/ Normalement, en suivant bien les étapes du tuto, il n'y a aucun pb, je l'ai reproduis moi-même sur un forum tout neuf, qui est d'ailleurs en exemple =)
    Spike
    MasculinAge : 21Messages : 63

    le Ven 30 Nov 2012 - 0:25

    Merci beaucoup ! Je cherchais cet effet depuis quand même pas mal de temps Very Happy
    Ilmryn
    FémininAge : 19Messages : 36

    le Sam 1 Déc 2012 - 13:37

    Merci du partage, cela risque de m'être utile ^^



    Eden.
    FémininAge : 24Messages : 201

    le Ven 7 Déc 2012 - 9:51

    Merci beaucoup (:
    Kitsuki
    FémininAge : 17Messages : 20

    le Dim 9 Déc 2012 - 4:22

    Sa va .. Peut être me servir si un jour je comprends les feuilles de personnages xD Merci du partage !
    Immortal
    FémininAge : 30Messages : 631

    le Dim 9 Déc 2012 - 20:09

    Formidableeeeee ** Merci d'avoir partagé ce code **




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    Invité

    le Dim 9 Déc 2012 - 21:49

    A vot' service. :)
    Nayero
    MasculinAge : 21Messages : 38

    le Lun 10 Déc 2012 - 15:03

    merci



    Rosedesvents
    FémininAge : 30Messages : 88

    le Mer 12 Déc 2012 - 11:35

    Merci beaucoup ! J'adore l'effet progressif comme celui là Very Happy
    Natsuya Gaïaguard
    FémininAge : 26Messages : 144

    le Mer 12 Déc 2012 - 12:10

    j'adore je vais surement l'utiliser sur mon forum



    Stanislava
    FémininAge : 21Messages : 102

    le Mer 12 Déc 2012 - 13:13

    Han, c'est super Ö, merci c:



    Himmie
    MasculinAge : 19Messages : 128

    le Mer 12 Déc 2012 - 20:52

    merchiiiiiiiiiiiiiiiiiiiiiiiiiiii
    Miss Ryuichi
    FémininAge : 25Messages : 34

    le Sam 15 Déc 2012 - 10:46

    Super ! arigato ♥
    Akiki
    FémininAge : 18Messages : 24

    le Dim 23 Déc 2012 - 19:50

    Merci
    Chucky'
    MasculinAge : 19Messages : 80

    le Dim 30 Déc 2012 - 17:44

    merci ^^



    Contenu sponsorisé

    Aujourd'hui à 13:32


      La date/heure actuelle est Lun 5 Déc 2016 - 13:32