Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] Réduire mon image si elle dépasse la résolution de l'écran ?

Attonde
    19 décembre 2005 à 8:17:24

    Bonjour,
    Je voudrais faire un design extensible, je sais que dans le css il faut mettre des pourcentages etc...
    Mais une image c'est pas extensible :euh: ...
    Donc je pose la question: comment connaître la résolution d'écrant du visiteur ?
    Si il existe une autre solution je suis partant.
    Merci d'avance
    désolé je n'ai pas lut le sujet disant que le forum ferme...

    [Edit] Nyro Xeo > Titre édité pour l'indexation de recherches.
    • Partager sur Facebook
    • Partager sur Twitter
    Havrest
      19 décembre 2005 à 19:16:34

      Salut.

      Ce qui t'intéresses plus que la résolution de l'utilisateur, c'est plutôt la surface affichable (la zone où la page est affichée peut être beaucoup plus petite que la résolution (fenêtre réduite, panneau latéral ouvert...) ). Voici donc le code qui devrait fonctionner sur IE et Netscape (ff, moz, etc...) :

      if(document.body.clientWidth)
        height  = document.body.clientHeight;
        width   = document.body.clientWidth;
      }
      else if(window.innerHeight) {
        height  = window.innerHeight;
        width   = window.innerWidth;
      }
      else {
        height  = 0;
        width   = 0;
      }


      Si le navigateur n'est pas compatible avec ce code alors height et width sont mis à zéro.

      A+
      • Partager sur Facebook
      • Partager sur Twitter
      Attonde
        20 décembre 2005 à 14:19:56

        Merci de la réponse :)
        Mais moi et le java script ça fait 2 je pourais avoir des explications ?
        • Partager sur Facebook
        • Partager sur Twitter
        Havrest
          20 décembre 2005 à 17:55:51

          Voici quelques explications :

          la première partie :
          if(document.body.clientWidth)
            height  = document.body.clientHeight;
            width   = document.body.clientWidth;
          }

          permet de récupérer la taille de la zone où est affichée la page internet mais n'est valable que pour IE. C'est pour cela qu'il y a : if(document.body.clientWidth) qui permet de vérifier que cette propriété existe et donc que la page est affichée sous IE.

          Si cette propriété n'existe pas alors on est sous un autre type de navigateur. On vérifie donc si l'on est sous un navigateur Netscape (comme firefox ou mozilla par exemple) :
          else if(window.innerHeight) {
            height  = window.innerHeight;
            width   = window.innerWidth;
          }



          Dans les deux cas, la hauteur de la zone est attribuée à la variable height et la largeur à width. Enfin si il ne s'agit ni d'un navigateur Netscape ni de IE ben alors height et width = 0 (juste une valeur pour savoir que l'on ne peut pas savoir ( :p ) quelle est la taille de la zone).

          Donc ce que tu veux faire c'est afficher un logo différent selon la taille de la fenètre ? Tu peux faire comme ceci :
          window.onload = resize_logo;
          window.onresize = resize_logo;

          function resize_logo() {
            //Récupération de la taille de la zone affichable
            if(document.body.clientWidth)
              width   = document.body.clientWidth;
            else if(window.innerWidth)
              width   = window.innerWidth;
            else
              width   = 0;
           
            if(width == 0)
              return false;
           
            //Zone affichable fait moins de 800 pixels :
            if(width < 800)
              toggle_logo(800);
            //Zone affichable fait moins de 1024 pixels :
            else if(width < 1024)
              toggle_logo(1024);
            //Zone affichable fait moins de 1152 pixels :
            else if(width < 1152)
              toggle_logo(1152);
            //Zone affichable fait moins de 1280 pixels :
            else if(width < 1280)
              toggle_logo(1280);
            //Zone affichable très grande, logo pour grandes tailles :
            else
              toggle_logo(-1);
           
            return true;
          }

          function toggle_logo(size) {
            logo = document.getElementById('logo').src;
           
            switch(size) {
              default:
              case -1:
                logo = 'logo_grandes_taille.png';
              break;
             
              case 800:
                logo = 'logo_800_et_moins.png';
              break;
             
              case 1024:
                logo = 'logo_1024_et_moins.png';
              break;
             
              case 1152:
                logo = 'logo_1152_et_moins.png';
              break;
             
              case 1280:
                logo = 'logo_1280_et_moins.png';
              break;
            }
           
            return true;
          }


          Et dans ta page html, ton logo :
          <img id="logo" src="logo_taille_par_default.png" />


          Bien sûr tu n'est pas obligé de prendre en compte autant de cas de résolutions et je te le déconseille d'ailleur. 2 ou 3 devrait suffir.

          A+
          • Partager sur Facebook
          • Partager sur Twitter
          Attonde
            21 décembre 2005 à 18:38:42

            Si j'ai bien compris ça redimentionne l'image :D c'est génial
            Moi c'est en fait pour un menu
            Je peux demander de réduire le menu en entier ?
            • Partager sur Facebook
            • Partager sur Twitter
            Nyro Xeo
              21 décembre 2005 à 18:41:05

              Hum à ce moment je te conseille plutôt de refaire ton CSS extensible (si tu as des problèmes ouvre un nouveau topic), parce que ce n'est pas une bonne idée de miser sur le JavaScript pour "compatibiliser" ses pages.
              • Partager sur Facebook
              • Partager sur Twitter
              Attonde
                21 décembre 2005 à 20:33:36

                J'ai déjà un css extensible mais le problème c'est que je veux avoir l'image de fond de mon menu en entier donc bon le css et les % ne sont pas suffisants
                Mais si on peut faire un design extensible en css, je prend :D
                • Partager sur Facebook
                • Partager sur Twitter
                Attonde
                  24 décembre 2005 à 13:18:38

                  c'est encore moi !
                  J'aimerais savoir comment le site du zero fait pour avoir un design extensible ???
                  • Partager sur Facebook
                  • Partager sur Twitter

                  [JS] Réduire mon image si elle dépasse la résolution de l'écran ?

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur ●
                  • Markdown