compatibilite avec firefox

Version imprimable

Bonsoir,
Je souhaite faire une visionneuse classique...
Mon truc fonctionne plutot pas mal, reste juste un mystere (pour moi :-)) avec firefox :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="galerie"> 
    <dl class="Photo"> 
 
        <img id="big_pict" src="../graphisme/250x250soldes0906.gif" alt="Photo 1 en taille normale" width="150px"/><span><img id="big_pict" src="../graphisme/250x250soldes0906.gif" alt="Photo 1 en taille normale" width="500px" /></span>
    </dl>
	<div id="PlaceMiniature">
		<ul id="galerie_mini"> 
			<li><a href="../graphisme/250x250soldes0906.gif"  title="Titre de la photo 1"><img src="../graphisme/250x250soldes0906.gif" width="35px" alt="Le titre de la photo 1" /></a></li> 
			<li><a href="../graphisme/compte.gif"  title="Titre de la photo 2"><img src="../graphisme/compte.gif" width="35px" alt="Le titre de la photo 2" /></a></li> 
			<li><a href="../graphisme/3Fois.jpg"  title="Titre de la photo 4"><img src="../graphisme/3Fois.jpg" width="35px" alt="Le titre de la photo 4" /></a></li> 
			<li><a href="../graphisme/BonDeReduction.jpg"  title="Titre de la photo 5"><img src="../graphisme/BonDeReduction.jpg" width="35px" alt="Le titre de la photo 5" /></a></li> 
		</ul> 
 	</div>
</div>

mon img big_pict est visible que sous IE sous firefox je dois ajouter une alert dans la fct de redim pour que ca marche !!!

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
 
// JavaScript Document
 
function redimImage(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();
 
var styleHtml = new Array();
  // Affectation du chemin de l'image a l'objet
  oImg.src = inImg;
 ************************MYSTERE AVEC FIREFOX***********
 **********SI J'AJOUTE alert('kiki'); CA FONCTION******************
  // 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 retourne une chaine correspondant au style
  styleHtml = new Array(dW, dH);
 
  return styleHtml;
}
 
function displayPics() 
{ 
 
    var photos = document.getElementById('galerie_mini') ; 
    // On récupère l'élément ayant pour id galerie_mini 
    var liens = photos.getElementsByTagName('a') ; 
    // On récupère dans une variable tous les liens contenu dans galerie_mini 
    var big_photo = document.getElementById('big_pict') ; 
    // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale 
 
   // var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; 
    // Et enfin le titre de la photo de taille normale 
 
    // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini 
    for (var i = 0 ; i < liens.length ; ++i) { 
        // Au clique sur ces liens  
        liens[i].onclick = function() { 
		    big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien 
            big_photo.alt = this.title; // On change son titre
 
			var StyleHtml=redimImage(this.href,300,300); 
			big_photo.style.width = StyleHtml[0]+"px";
			big_photo.style.height = StyleHtml[1]+"px";
          //  titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo 
            return false; // Et pour finir on inhibe l'action réelle du lien 
        }; 
    } 
} 
window.onload = displayPics; 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page

Est ce un pb de synchronisation des noms dans le temps ?

26/11/2009, 00h56
kernelfailure

Les ids doivent être unique.
(Ton IMG est en double ? Il y a une raison ?)

Je ne voudrais pas dire d'ânerie, mais il me semble qu'en XHTML les tags vide fermant doivent respecter l'espace. Par exemple ce n'est pas "<br/>" mais "<br />". (cf. ton premier IMG)
26/11/2009, 09h18
guigo

Salut,
merci pour le coup de main.
Effectivement il y a bien une raison du double id.... J'ai dans mes propriétés css une action sur le survol de la photo (agrandissement de la photo)....
Merci pour tes conseils sémantiques.

J'ai essaye avec un id unique et rien ne change....

Merci,
Guigo

Citation:
Envoyé par guigo
mon img big_pict est visible que sous IE sous firefox je dois ajouter une alert dans la fct de redim pour que ca marche !!!
Code:

1 2 3 4 5 6 7 8 // Affectation du chemin de l'image a l'objet oImg.src = inImg; ************************MYSTERE AVEC FIREFOX*********** **********SI J'AJOUTE alert('kiki'); CA FONCTION****************** // On recupere les tailles reelles var h = dH = oImg.height; var w = dW = oImg.width;
C'est probablement du au fait que quand tu défini le src de oImg, le navigateur va la chercher (requete HTTP qui peut prendre du temps). Du coup avec un alert, il a le temps d'aller la telecharger, mais sans et ben non... du coup la taille est à 0
D'ailleurs vide ton cache IE et reessaye...
la solution ?
passer par le onload de l'image pour travailler avec la taille...

26/11/2009, 09h34
guigo

Salut,
Je me doutais bien d'un pb de ce genre (synchronisation).

A la fin de mon javascript j'utilise le onload est-ce ca que tu voulais me dire?
Sinon peux tu me guider un peu stp, je suis loin d'être expert en 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
// GWYOHM:on ajoute un parametre call back
function redimImage(inImg, inMW, inMH, onImageSizeComputed)
{
  // 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();
 
var styleHtml = new Array();
  // GWYOHM: On encapsule le code qui doit etre execute après le chargement de l'image
  oImg.onload = function() {
	  // 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 retourne une chaine correspondant au style
	  styleHtml = new Array(dW, dH);
	  // Appel au call back
	  onImageSizeComputed(styleHtml);
  }
  // GWYOHM: on affecte le chemin apres ... pour etre sur de pas se prendre les pieds dans le cache
  // Affectation du chemin de l'image a l'objet
  oImg.src = inImg;
}
 
function displayPics() 
{ 
 
    var photos = document.getElementById('galerie_mini') ; 
    // On récupère l'élément ayant pour id galerie_mini 
    var liens = photos.getElementsByTagName('a') ; 
    // On récupère dans une variable tous les liens contenu dans galerie_mini 
    var big_photo = document.getElementById('big_pict') ; 
    // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale 
 
   // var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; 
    // Et enfin le titre de la photo de taille normale 
 
    // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini 
    for (var i = 0 ; i < liens.length ; ++i) { 
        // Au clique sur ces liens  
        liens[i].onclick = function() { 
		    big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien 
            big_photo.alt = this.title; // On change son titre
			// GWYOHM: le code ici devient asynchrone (dependant du chargement de l'image, on peut par exemple passer une fonction
			redimImage(this.href,300,300, function(StyleHtml) {
				big_photo.style.width = StyleHtml[0]+"px";
				big_photo.style.height = StyleHtml[1]+"px";
			  //  titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo 
			}); 
            return false; // Et pour finir on inhibe l'action réelle du lien 
        }; 
    } 
}

Pas testé, mais je poense que ca devrait ressembler à ca

26/11/2009, 10h00
guigo

ah yes bien vu ;-).
Bon je te tiens au courant dans la soirée.
Dsl j'ai pas mon code ici....

Merci
26/11/2009, 12h53
guigo

Bon j'ai peu tester.
Ca marche parfaitement...
Merci