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.


    Agrandissement d'image au survol

    Partagez
    Lucky Numb£r
    MasculinAge : 23Messages : 1971

    le Mer 21 Avr 2010 - 0:46

    Bonsoir, en cette belle soirée de vacances je vais vous poster quelques astuces à la demande de Sparrow. La première consiste à appliquer une sorte de zoom à une image. Pour ceci il faudra combiner un peu de code Html et CSS. Tout d'abord prenez l'image et appliquez lui une class, dans notre cas ce sera la class "zoom".
    Code:
    <div class="zoom">
        <p>
            <img src="URL DE L'IMAGE"
            alt="NOM DE L'IMAGE" />
        </p>
    </div>
    Il suffit ensuite de rajouter dans votre CSS ce petit qui bien évidemment est personnalisable selon les besoins.
    Code:
    .zoom {
    height:XXXpx;
    margin:auto;
    }
    .zoom p {
    text-align:center;
    }
    .zoom img {
    width:XXXpx;
    height:XXXpx;
    }
    .zoom img:hover {
    width:XXXpx;
    height:XXXpx;
    }
    Voilà c'est tout pour cette première astuce, enjoy Wink !
    P.S ~ Cette astuce a été partagée par Sparrow lui même, mais je ne sais plus à quel moment.
    P.S² ~ Remarquez que c'est aussi sur ce principe que sont fondées les infobulles...


    Dernière édition par Lucky Numb£r le Lun 10 Mai 2010 - 20:08, édité 1 fois



    Pti' Biscuit
    MasculinAge : 21Messages : 1690

    le Sam 24 Avr 2010 - 14:58

    heu ca ne marche pa sj'ai bien mit la page css mais quand je met le code aprés bah ca reste code quel problème s'il te plais ^^ ?





    ~ Canonnier of Calypso ~
    Angel Ezekiel
    MasculinAge : 24Messages : 1350

    le Sam 24 Avr 2010 - 15:04

    Tu as bien régler les valeurs dans le code Css?Tu as bien mis l'adresse de l'image et pas son code BBC?



    Lucky Numb£r
    MasculinAge : 23Messages : 1971

    le Sam 24 Avr 2010 - 17:27

    Benjamin, essaies le code suivant.
    Code:
    <div class="zoom">
    <img src="adresse de l'image">
    </div>
    Mais c'est tout de même bizarre.. Oo



    Pti' Biscuit
    MasculinAge : 21Messages : 1690

    le Sam 24 Avr 2010 - 19:22

    oui j'ai tous bien fait





    ~ Canonnier of Calypso ~
    HighDesign
    MasculinAge : 25Messages : 29

    le Lun 10 Mai 2010 - 14:56

    Sympa l'astuce merci :)

    aymene256
    MasculinAge : 21Messages : 245

    le Lun 10 Mai 2010 - 17:23

    trop cool,merci pour l'astuce.



    HighDesign
    MasculinAge : 25Messages : 29

    le Lun 10 Mai 2010 - 17:34

    A noter qu'il y a aussi possibilité de faire quelque chose de plus fluide et avec meilleur rendu sous flash ou en java-script...mais c'est loin d'être aussi facile^^

    Lucky Numb£r
    MasculinAge : 23Messages : 1971

    le Lun 10 Mai 2010 - 20:10

    Hello, je passe juste pour dire que j'ai édité et refait le code, comme ça sa devrait aller maintenant >.< J'ai aussi trouvé plusieurs méthodes en Javascript mais elles sont franchement plus compliquées que celle là et donc je pense pas les mettre ici, évidemment si elles sont demandées je les posterai à la suite mais sinon nada XD.



    Ziktaon
    MasculinAge : 24Messages : 843

    le Mer 19 Mai 2010 - 0:45

    Bonjour ou bonsoir, tout d'abord merci pour ce code mais pouvez me donner un exemple de ce que ca va donner ?






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Lucky Numb£r
    MasculinAge : 23Messages : 1971

    le Mer 19 Mai 2010 - 18:17

    Euh là sous la main non je n'ai pas d'exemple désolé et par manque de temps je ne peux en fournir... x) Comme on dit on est mieux servir que par soi même donc essayez sur un forum test vous verrez bien :p.
    J'précise quand même qu'il faut éviter de prendre des dimensions trop éloignées des véritables dimensions de l'image concernée et pour appliquer cette effet à plusieurs image, il faudrait qu'elles aient toutes les mêmes dimensions. Autrement dit, bien contraignant :O
    P.S ~ Peut être ce week end je donnerai un exemple si personne n'a daigné en poster un..



    Ziktaon
    MasculinAge : 24Messages : 843

    le Mer 19 Mai 2010 - 18:35

    Je sais mais j'ai essayé le code sur un de mes forum test, et comme ca m'avait donner un rendu bizarre je m'étais dit que c'était peut être une erreur de ma part.






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Lucky Numb£r
    MasculinAge : 23Messages : 1971

    le Mer 19 Mai 2010 - 19:25

    Ton image a pixelisé ou a été floutée à l'agrandissement ? Si oui la différence entre les dimensions de départ et celles que tu as prescrites devait être trop grande.



    Ziktaon
    MasculinAge : 24Messages : 843

    le Ven 21 Mai 2010 - 0:36

    En faite je l'ai placer dans catégorie, règles, et j'ai fait quelques réglages de taille, et tout d'un coup a ca grandi passant par derrière une autres images, comme un fond d'écran mais pour les catégories. Ca ma sembler bizarre, donc j'ai eu un doute et c'est pour ca que je suis venu poser la question.






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Pti' Biscuit
    MasculinAge : 21Messages : 1690

    le Dim 23 Mai 2010 - 15:20

    moi c'ets bon sa change mais l'img est minscule et il y a rien dedans donc en gros encore rater --" , peut être que je remplis mal le css





    ~ Canonnier of Calypso ~
    Lucky Numb£r
    MasculinAge : 23Messages : 1971

    le Dim 23 Mai 2010 - 18:21

    Ziktaon, tu as peux être inversé la largeur avec la longueur, fais attention ça m'étais arrivé la première fois ^^' Même remarque pour toi Papy Nova. Cependant j'arrive pas à vous donner un exemple puisque je peux pas faire de gif -_-'



    Ziktaon
    MasculinAge : 24Messages : 843

    le Dim 23 Mai 2010 - 19:52

    Si on mettait des renders a la place des images, ca serait plus pratique non ?






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Tina
    FémininAge : 32Messages : 58

    le Jeu 1 Juil 2010 - 19:40

    Bonjour,

    J'aimerai savoir comment appliquer cet effet non pas sur une image prédéfinie mais sur l'ensemble des images postées sur le forum afin de ne pas déformer ce dernier. Comme sur Never-Utopia quoi ^^

    Merci d'avance de votre aide Wink




      Soi Fong & Aizen Sosuke fan :3
    Sui'
    MasculinAge : 24Messages : 1865

    le Jeu 1 Juil 2010 - 19:52

    Tu parle des images qu'on poste dans nos galerie?

    Quand y'a marquer au dessus de l'image: " Agrandir l'image"?



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    Tina
    FémininAge : 32Messages : 58

    le Jeu 1 Juil 2010 - 20:37

    Oui, c'est bien ça Very Happy




      Soi Fong & Aizen Sosuke fan :3
    Sui'
    MasculinAge : 24Messages : 1865

    le Jeu 1 Juil 2010 - 20:43

    Dans ce cas c'est pas du codage ^^.

    Tu vas dans ton panneau d'administration -> Général -> Message et E-mail: Configuration.
    Tu vas tout en bas quasiment et tu as cette phrase: "Redimensionnement des images".

    Ta plus qu'a remplir les champs à droite ^^.

    Normalement c'est sa.




    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    Tina
    FémininAge : 32Messages : 58

    le Mar 6 Juil 2010 - 15:12

    Alors c'est pas ça que je cherche car c'est pas les images postées dans la galerie que je souhaite redimensionner automatiquement en fait mais les images postées sur le forum même ^^" Genre tu peux poster un fond d'écran d'ordinateur mais il sera redimensionner pour ne pas déformer le forum. Je ne sais pas si c'est clair. Au passage, cette fonction est utilisée ici ^^




      Soi Fong & Aizen Sosuke fan :3
    Sui'
    MasculinAge : 24Messages : 1865

    le Mar 6 Juil 2010 - 17:49

    c'est pas les images postées dans la galerie que je souhaite redimensionner automatiquement en fait mais les images postées sur le forum même

    C'est quoi la différence entre galerie et forum même --" tu m'explique la :/.

    Si tu parle pas des image dans les message qu'on poste dans galerie ou autre je vois pas ou sa peut être.



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    Tina
    FémininAge : 32Messages : 58

    le Lun 19 Juil 2010 - 21:57

    Désolée pour la réponse tardive mais j'étais en vacances.

    C'est quoi la différence entre galerie et forum même --" tu m'explique la :/.
    FF propose une galerie où on peut télécharger directement des images consultable via la barre de navigation mais c'est comme le portail, il faut l'activer pour qu'elle s'affiche mais je me demande si c'est ça dont tu parles ^^'

    Sinon, j'ai suivi tes instructions et ça redimensionne en effet les images postée dans les messages seulement il n'y a pas les options qui permettent d'agrandir l'image ou de le rétrécir comme c'est le cas ici.




      Soi Fong & Aizen Sosuke fan :3
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Mar 20 Juil 2010 - 1:02

    Salut, alors si j'ai bien tout suivit et que je ne répond pas à côté il te faut aller dans le panneau d'administration > Général > Messages & e-mail > Configuration. Là, en bas du premier cadre, il te suffit de remplir le champ "redimensionner les images" en mettant la largeur maximum qu'elles peuvent avoir en étant affichées sur le forum. Une fonction bien pratique pour éviter de tout déformer. Par contre cela ne prend pas en compte l'espace signature (il me semble). Voilou^^



    Contenu sponsorisé

    Aujourd'hui à 1:17


      La date/heure actuelle est Dim 11 Déc 2016 - 1:17