IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

fonction JS et actualisation de la page


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Profil pro
    Étudiant
    Inscrit en
    Avril 2009
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2009
    Messages : 21
    Points : 18
    Points
    18
    Par défaut fonction JS et actualisation de la page
    Bonjour,

    J'ai un problème avec une fonction JS qui sert à redimensionner des photos, la fonction fonctionne très bien le problème c'est que les photos ne s'affichent pas toujours et lorsque que je réactualise ma page soient elles apparaissent soient il n'y en a plus aucune ... Un problème très aléatoire mais assez embêtant.

    Voici les liens où l'on peut voir ce problème :

    http://www.conceptauto44.fr/index.php
    http://www.conceptauto44.fr/Pages/Vehicules/index.php
    http://www.conceptauto44.fr/Pages/Ve...fre.php?num=61

    Quand on arrive sur les pages des liens ci-dessus, il faut recliquer sur l'onglet pour voir les images ... Et je ne comprends pas pourquoi ... SA M'ENERVE lol

    Voici le code de la fonction JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    function redimPhoto(inImg, inMW, inMH)
    {
      // Cette function recoit 3 parametres
      // inImg : Chemin relatif de l'image
      // inMW  : Largeur maximale
      // inMH   : Hauteur maximale
      var maxWidth = inMW;
      var maxHeight = inMH;
      // Declarations des variables "Nouvelle Taille"
      var dW = 0;
      var dH = 0;
      // Declaration d'un objet Image
      var oImg = new Image();
      // Affectation du chemin de l'image a l'objet
      oImg.src = inImg;
      // On recupere les tailles reelles
      var h = dH = oImg.height;
      var w = dW = oImg.width;
      // Si la largeur ou la hauteur depasse la taille maximale
      if ((h >= maxHeight) || (w >= maxWidth)) {
        // Si la largeur et la hauteur depasse la taille maximale
        if ((h >= maxHeight) && (w >= maxWidth)) {
          // On cherche la plus grande valeur
          if (h > w) {
            dH = maxHeight;
            // On recalcule la taille proportionnellement
            dW = parseInt((w * dH) / h, 10);
          } else {
            dW = maxWidth;
            // On recalcule la taille proportionnellement
            dH = parseInt((h * dW) / w, 10);
          }
        } else if ((h > maxHeight) && (w < maxWidth)) {
          // Si la hauteur depasse la taille maximale
          dH = maxHeight;
            // On recalcule la taille proportionnellement
          dW = parseInt((w * dH) / h, 10);
        } else if ((h < maxHeight) && (w > maxWidth)) {
          // Si la largeur depasse la taille maximale
          dW = maxWidth;
            // On recalcule la taille proportionnellement
          dH = parseInt((h * dW) / w, 10);
        }
      }
      // On ecrit l'image dans le document
      document.writeln("<img src=\"" + inImg + "\" width=\"" + dW + "\" height=\"" + dH + "\" border=\"0\">");
    };

    Et voici le code de son utilisation :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <SCRIPT LANGUAGE="JavaScript">redimPhoto('maphoto.jpg', 100, 100)</SCRIPT>

    Merci d'avance de vos réponses j'ai vraiment besoin d'aide là je ne vois pas du tout pourquoi cela se comporte ainsi.

  2. #2
    Membre averti
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Octobre 2005
    Messages
    218
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2005
    Messages : 218
    Points : 311
    Points
    311
    Par défaut
    Tu dois avoir un pb dans le calcul de tes coordonnées, la fonction retourne un width, un height et un border à 0. (cf sous Firefox).
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <img src="../../Images/Offres/SN22/picasso4.jpg" width="0" border="0" height="0"></td><td colspan="4" class="titre_offre">[SN22] - CITROEN Picasso 1.6 HDI110 FAP PACK</td></tr><tr><td style="width: 25%;"><u>M.E.C :</u> 01/01/2008</td><td style="width: 25%;"><u>Puissance :</u> 0 CV</td><td style="width: 25%;" rowspan="2" class="prix">11 700 €</td></tr><tr><td style="width: 25%;"><u>Kilométrage :</u> 102 000 KM</td><td style="width: 25%;"><u>Energie :</u> DIESEL</td></tr><tr><td colspan="3" style="text-align: center;"><a href="detailOffre.php?num=54">Voir les détails</a></td><td></td></tr></tbody></table></td></tr><tr class="fond"><td style="width: 100%;"><table style="width: 100%; text-align: left;" cellspacing="10"><tbody><tr><td style="width: 25%;" rowspan="4"><script language="JavaScript">redimPhoto('../../Images/Offres/SN26/senic1.jpg', 150, 200)</script><img src="../../Images/Offres/SN26/senic1.jpg" width="0" border="0" height="0">
    
    </td><td colspan="4" class="titre_offre">[SN26] - RENAULT Scenic II 1.9 DCI120 CONFORT EXPRESSION</td></tr><tr><td style="width: 25%;"><u>M.E.C :</u> 01/01/2005</td><td style="width: 25%;"><u>Puissance :</u> 0 CV</td><td style="width: 25%;" rowspan="2" class="prix">8 300 €</td></tr><tr><td style="width: 25%;"><u>Kilométrage :</u> 83 000 KM</td><td style="width: 25%;"><u>Energie :</u> DIESEL</td></tr><tr><td colspan="3" style="text-align: center;"><a href="detailOffre.php?num=50">Voir les détails</a></td><td></td></tr></tbody></table></td></tr><tr class="fond"><td style="width: 100%;"><table style="width: 100%; text-align: left;" cellspacing="10"><tbody><tr><td style="width: 25%;" rowspan="4"><script language="JavaScript">redimPhoto('../../Images/Offres/SN24/picasso1.jpg', 150, 200)</script><img src="../../Images/Offres/SN24/picasso1.jpg" width="0" border="0" height="0">
    
    </td><td colspan="4" class="titre_offre">[SN24] - CITROEN Picasso 1.8 16V PACK STYLE</td></tr><tr><td style="width: 25%;"><u>M.E.C :</u> 01/01/2004</td><td style="width: 25%;"><u>Puissance :</u> 0 CV</td><td style="width: 25%;" rowspan="2" class="prix">4 800 €</td></tr><tr><td style="width: 25%;"><u>Kilométrage :</u> 118 000 KM</td><td style="width: 25%;"><u>Energie :</u> ESSENCE</td></tr><tr><td colspan="3" style="text-align: center;"><a href="detailOffre.php?num=51">Voir les détails</a></td><td></td></tr></tbody></table></td></tr><tr class="fond"><td style="width: 100%;"><table style="width: 100%; text-align: left;" cellspacing="10"><tbody><tr><td style="width: 25%;" rowspan="4"><script language="JavaScript">redimPhoto('../../Images/Offres/SN19/C31.jpg', 150, 200)</script><img src="../../Images/Offres/SN19/C31.jpg" width="0" border="0" height="0">
    
    </td><td colspan="4" class="titre_offre">[SN19] - CITROEN C3 1.4 HDI70 PACK CLIM</td></tr><tr><td style="width: 25%;"><u>M.E.C :</u> 05/07/2007</td><td style="width: 25%;"><u>Puissance :</u> 0 CV</td><td style="width: 25%;" rowspan="2" class="prix">6 990 €</td></tr><tr><td style="width: 25%;"><u>Kilométrage :</u> 99 737 KM</td><td style="width: 25%;"><u>Energie :</u> DIESEL</td></tr><tr><td colspan="3" style="text-align: center;"><a href="detailOffre.php?num=56">Voir les détails</a></td><td></td></tr></tbody></table></td></tr></tbody></table><table style="text-align: center; width: 100%; margin-bottom: -10px;"><tbody><tr><td colspan="2" style="text-align: center;">

  3. #3
    Membre à l'essai
    Profil pro
    Étudiant
    Inscrit en
    Avril 2009
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2009
    Messages : 21
    Points : 18
    Points
    18
    Par défaut
    Oui j'ai vu ça aussi mais j'ai beau avoir tourné mon code dans tout les sens je ne vois pas pourquoi parfois ça marche et d'autre fois non ...

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    oImg.src = inImg;
      // On recupere les tailles reelles
      var h = dH = oImg.height;
      var w = dW = oImg.width;
    Ben, si tu essayes de récupérer les dimensions de ton image avant que l'image ai été chargée, c'est sûr, ça marche moins bien
    Du coup, si les images sont dans le cache, ton script fonctionnera, sinon, et bien, tu as pu constater le résultat !
    Utilise l'événement onload des objets image

    Sinon :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.writeln("<img src=\"" + inImg + "\" width=\"" + dW + "\" height=\"" + dH + "\" border=\"0\">");

  5. #5
    Membre à l'essai
    Profil pro
    Étudiant
    Inscrit en
    Avril 2009
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2009
    Messages : 21
    Points : 18
    Points
    18
    Par défaut
    Désolée je ne veux pas abuser mais je ne vois pas comment utiliser onload sur l'objet Image ... Pourrais-tu m'expliquer un peu en quoi cela consiste je ne vois pas où le mettre dans le code ... Merci beaucoup d'avance.

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    oImg.src = inImg;
    oImg.onload=function(){
      // On recupere les tailles reelles
      var h = dH = oImg.height;
      var w = dW = oImg.width;
      ...
    }

  7. #7
    Membre à l'essai
    Profil pro
    Étudiant
    Inscrit en
    Avril 2009
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2009
    Messages : 21
    Points : 18
    Points
    18
    Par défaut
    J'ai testé ça mais maintenant les images ne s'affichent plus du tout ... (les joies de l'informatique ...)

Discussions similaires

  1. Réponses: 3
    Dernier message: 17/03/2010, 13h49
  2. appel d'une fonction qui est dans une autre page
    Par guppy33 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 02/08/2006, 12h05
  3. Réponses: 1
    Dernier message: 05/04/2006, 18h15
  4. Executer une fonction js au chargement de la page
    Par Death83 dans le forum Général JavaScript
    Réponses: 18
    Dernier message: 06/03/2006, 23h35
  5. Site qui vérifie les actualisations d'une page web
    Par LFC dans le forum Autres langages pour le Web
    Réponses: 4
    Dernier message: 01/12/2005, 18h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo