Discussion :

[Empty_body]

Bonsoir tout le monde,

J'essaie pour l'instant de mettre au point une petite galerie photo, j'ai quelque peu alléger le code (pas mis les CSS) de manière à ce qu'il ne soit pas trop long à parcourir. Sous ie6 - ie7, ça fonctionne sans problème. Mais firefox semble rétissant... Quelqu'un voit le pourquoi du comment?

Merci.

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
<script>
		function initializeScripts(){
			initializeClickableImages();
		}
 
		function initializeClickableImages(){
			clickableImages = findTagsByAttribute('img','className','clickable');
			for(ci=0 ; ci<clickableImages.length ; ci++){
				window.status +="Image" + parseInt(ci+1) + " initialized"; 
				clickableImage = clickableImages[ci];
				clickableImage.onclick=displayImage;
			}		
		}
 
		function displayImage(){
			tdCentre = findTagsByAttribute('td','className','frame centre')[0];
 
			img = new Image();
			img.src = this.src;
			img.width = this.width;
			img.height = this.height;
			img.alt=this.alt;
			xyFactor = this.width/this.height;
			if(xyFactor>0){
				img.width=460;
				img.height=parseInt(img.width/xyFactor);
			}else if(xyFactor<0){
				img.setAttribute("height","320");
				img.setAttribute("width",parseInt(img.height)*xyFactor);				
			}else{
			}
			tdCentre.innerHTML="<center>"+img.outerHTML+"<p/><span style='color: #eeeeee; padding: 10 0 10 0;'>"+img.alt+"</span></center>";	
		}
 
		function findTagsByAttribute(tagName, attributeName, attributeValue){
			tagList = document.getElementsByTagName(tagName);
			return findElementsByAttribute(tagList, attributeName, attributeValue)
		}
 
		function findElementsByAttribute(elmList, attributeName, attributeValue){
			elms = new Array();
			for(i=0 ; i<elmList.length ; i++){
				elm = elmList[i];
				if(elm.getAttribute(attributeName).toUpperCase()==attributeValue.toUpperCase()){
					elms[elms.length]=elm;
				}
			}
			return elms;
		}
</script>
 
<div onMouseOver="initializeScripts();">	
	<table class="frame" ">
		<tr width="">	
			<td class="frame miniatures">
				Cliquez sur une photo pour l'aggrandir
				<p/>
				<?php                           
                 print "<img class='clickable' src='./Paris/1.jpg' width='40px'/>";
                                ?>
			</td>	
		</tr>
		<tr width="">
			<td class="frame centre" >
 
			</td>
		</tr>
	</table>
</div>

[Bisûnûrs]

Et si tu nous disais à quel endroit ? As-tu une erreur Javascript ? Que dit Firebug (si tu ne l'as pas, installe-le, ça sauve la vie des programmeurs Javascript) ?

[Empty_body]

Bonjour Bisûnûrs,

Je n'ai pas encore firebug (comme c'est un truc que je développe hors boulot, je n'ai pas la possibilité de tester avant ce soir.) En fait, il n'y a aucune erreur js retournée... Sur ie, je passe sur la div, le js initialise la chose et je peux cliquer sur ma photo. Par contre, sous firefox, pas de message d'erreur, je passe sur la zone mais rien ne se produit... Je reste perplexe.

En tout cas, merci pour la piste firebug, j'essaierai dès mon retour.

[Bisûnûrs]

Si tu n'as ni la Webdeveloper Toolbar ni Firebug installés, Firefox ne parlera pas des masses concernant les erreurs Javascript.

Après, ton bug Firefox peut venir d'un problème au niveau HTML (je vois dans ton code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<table class="frame" ">

un guillemet en trop), alors que IE n'est pas trop regardant ni contrariant, Firefox lui n'aime pas trop ce genre de choses.

[Empty_body]

Re...

J'ai installé firebug qui m'indique cette ligne avec insistance... Mais je dois avouer que je ne comprends pas trop pourquoi...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(elm.getAttribute(attributeName).toUpperCase()==attributeValue.toUpperCase()){

elm.getAttribute(attributeName) has no properties
findElementsByAttribute([img.clickable 2.jpg, img.clickable 3.jpg, img.clickable 4.jpg, 41 more...], "className", "clickable")test (line 199)
findTagsByAttribute("img", "className", "clickable")test (line 192)
initializeClickableImages()test (line 162)
initializeScripts()test (line 158)
onmouseover(mouseover clientX=0, clientY=0)

J'ai quand même et dans le doute viré le " qui servait à rien...

[Empty_body]

Je me suis remis sur la source et je ne vois toujours pas ce que c'est... En fait, Firebug affiche 2 erreurs par miniature de photo survolée...

[Empty_body]

En débugant avec de alert, j'ai vu que elm.getAttribute(attributeName).toUpperCase() était toujours null sous firefox alors qu'il s'initialise à clickable sous IE. Hors clickable est le nom de la classe de la balise image.
Quelqu'un connait la source de ce comportement?

[Shinuza]

Hello

Tu as un element très interessant sous Firebug ; La console.

Tu peux faire un console.log, qui est plus explicite qu'un alert, et console.trace, qui remonte les appels à une fonction.
Utilise console.log(elm) dans findElementsByAttribute, puis click droit et "Inspect In Dom Tab" pour voir le contenu de ton objet.

Utilise également la méthode push() pour mettre un élement qui correspond à tes attentes dans la liste de retour (dans findElementsByAttribute).

[Empty_body]

ok, je vais tenter le coup... Ce que j'ai du mal à comprendre, c'est pourquoi ça fonctionne sous ie et pas sur ff...

[Empty_body]

Re...

Sous FF, les attibuts de eml sont toujours à null... Je ne comprends franchement pas pourquoi parce que lorsque j'envoie manuellement les valeurs dedans, ça fonctionne... Quelqu'un sait d'où ça peut venir???

Merci.