AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Fnac : 2 Funko Pop achetées : le 3ème offert (large sélection de ...
Voir le deal

    Agrandissement d'image au survol

    Lucky Numb£r
    Lucky Numb£r
    MasculinAge : 31Messages : 1972

    Mer 21 Avr 2010 - 0:46


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    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.

    Petit exemple :


    Tout d'abord prenez l'image et appliquez lui une class, dans notre cas ce sera la class "zoom".

    Code:
    <div class="zoom">
      <img src="URL DE L'IMAGE" alt="NOM DE L'IMAGE" />
    </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;
    text-align:center;
    }

    /*Largeur et hauteur image sans survol*/
    .zoom img {
    width:XXXpx;
    height:XXXpx;
    -webkit-transition: 0.5s; /*Rendre le mouvement fluide*/
    transition: 0.5s;/*Rendre le mouvement fluide*/
    }
    /*Largeur et hauteur image au survol*/
    .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
    Pti' Biscuit
    MasculinAge : 28Messages : 1691

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



    Agrandissement d'image au survol 2k0uoy

    ~ Canonnier of Calypso ~
    Angel Ezekiel
    Angel Ezekiel
    MasculinAge : 31Messages : 1377

    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
    Lucky Numb£r
    MasculinAge : 31Messages : 1972

    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
    Pti' Biscuit
    MasculinAge : 28Messages : 1691

    Sam 24 Avr 2010 - 19:22

    oui j'ai tous bien fait



    Agrandissement d'image au survol 2k0uoy

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

    Lun 10 Mai 2010 - 14:56

    Sympa l'astuce merci :)

    aymene256
    aymene256
    MasculinAge : 29Messages : 245

    Lun 10 Mai 2010 - 17:23

    trop cool,merci pour l'astuce.



    Agrandissement d'image au survol Signesuke
    HighDesign
    HighDesign
    MasculinAge : 32Messages : 29

    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
    Lucky Numb£r
    MasculinAge : 31Messages : 1972

    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
    Ziktaon
    MasculinAge : 31Messages : 843

    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 ?



    Agrandissement d'image au survol 719846zikisigna



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

    Lucky Numb£r
    Lucky Numb£r
    MasculinAge : 31Messages : 1972

    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
    Ziktaon
    MasculinAge : 31Messages : 843

    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.



    Agrandissement d'image au survol 719846zikisigna



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

    Lucky Numb£r
    Lucky Numb£r
    MasculinAge : 31Messages : 1972

    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
    Ziktaon
    MasculinAge : 31Messages : 843

    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.



    Agrandissement d'image au survol 719846zikisigna



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

    Pti' Biscuit
    Pti' Biscuit
    MasculinAge : 28Messages : 1691

    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



    Agrandissement d'image au survol 2k0uoy

    ~ Canonnier of Calypso ~
    Lucky Numb£r
    Lucky Numb£r
    MasculinAge : 31Messages : 1972

    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
    Ziktaon
    MasculinAge : 31Messages : 843

    Dim 23 Mai 2010 - 19:52

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



    Agrandissement d'image au survol 719846zikisigna



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

    Tina
    Tina
    FémininAge : 39Messages : 70

    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



      Agrandissement d'image au survol 84 Agrandissement d'image au survol AIZENIC02 Agrandissement d'image au survol 77 Agrandissement d'image au survol AIZENIC03
      Soi Fong & Aizen Sosuke fan :3
    Sui'
    Sui'
    MasculinAge : 32Messages : 1865

    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 *-*
    Agrandissement d'image au survol 657955SignatureSuicopie
    Sui' Art's
    Tina
    Tina
    FémininAge : 39Messages : 70

    Jeu 1 Juil 2010 - 20:37

    Oui, c'est bien ça Very Happy



      Agrandissement d'image au survol 84 Agrandissement d'image au survol AIZENIC02 Agrandissement d'image au survol 77 Agrandissement d'image au survol AIZENIC03
      Soi Fong & Aizen Sosuke fan :3
    Sui'
    Sui'
    MasculinAge : 32Messages : 1865

    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 *-*
    Agrandissement d'image au survol 657955SignatureSuicopie
    Sui' Art's
    Tina
    Tina
    FémininAge : 39Messages : 70

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



      Agrandissement d'image au survol 84 Agrandissement d'image au survol AIZENIC02 Agrandissement d'image au survol 77 Agrandissement d'image au survol AIZENIC03
      Soi Fong & Aizen Sosuke fan :3
    Sui'
    Sui'
    MasculinAge : 32Messages : 1865

    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 *-*
    Agrandissement d'image au survol 657955SignatureSuicopie
    Sui' Art's
    Tina
    Tina
    FémininAge : 39Messages : 70

    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.



      Agrandissement d'image au survol 84 Agrandissement d'image au survol AIZENIC02 Agrandissement d'image au survol 77 Agrandissement d'image au survol AIZENIC03
      Soi Fong & Aizen Sosuke fan :3
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

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



    sign
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 16:21