fonction JS et actualisation de la page

[nynnie7]

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 :

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 :

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

[macumba]

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 :

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;">

[nynnie7]

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

[Bovino]

Code :

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 :

document.writeln("<img src=\"" + inImg + "\" width=\"" + dW + "\" height=\"" + dH + "\" border=\"0\">");

[nynnie7]

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.

[Bovino]

Code :

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;
  ...
}

[nynnie7]

J'ai testé ça mais maintenant les images ne s'affichent plus du tout ... (les joies de l'informatique ...)