Bonsoir,
Je souhaite faire une visionneuse classique...
Mon truc fonctionne plutot pas mal, reste juste un mystere (pour moi :-)) avec firefox :
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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>
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
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 ?
Partager