[POO] code valable sous IE et non sous Firefox

Version imprimable

Bonjour,

Pour afficher dans une cellule de tableau, des informations sur une zone survolée, j'ai utilisé :
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 <script language="javascript"> efface = new Array(""); france = new Array("FRANCE"); </script> function affiche(pays) { with (this.carte) { nom.value = pays[0]; } } <table width="800px" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="background-color:#336699; color:#FFFFFF;" valign="top" width="250px"> <p><input type="text" name="nom" value="" class="blocPays" size="60"></p> </td> </tr> <tr> <td><img src="images/Europe500.gif" width="440" height="500" border="1" usemap="#carte" style="border-color:#336699; "> </td> </tr> </table> <map name="carte"> <area shape="poly" href="#" onMouseOver="affiche(france)" onMouseOut="affiche(efface)" target="_blank" coords="192,361,182,334,173,334,187,311,192,300,168,294,145,275,119,299,91,305,118,341,113,370,153,381,165,366,183,371"> </map>
J'ai simplifié le code à un seul pays pour plus de clarté, mais il concerne tous les pays d'Europe.
Ce code fonctionne très bien sous IE et rien de s'affiche sous Firefox?
Quelqu'un connait-il ce problème et comment le résoudre ?

Merci d'avance pour vos retours et commentaires,

8O8O8O
Je suis surtout surpris que cela fonctionne avec IE !!!
with te permet de créer un raccourci vers un objet et d'en appeler des propriétés, or dans

Code:

1
2
3
with (this.carte) {
nom.value = pays[0];
}

nom.value n'est pas une propriété de this.carte !

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
<script language="javascript">
efface = new Array("");
france = new Array("FRANCE");
 
function affiche(pays) {
	document.getElementById('nom').value = pays[0];
}
</script>
 
<table width="800px"  border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td style="background-color:#336699; color:#FFFFFF;" valign="top" width="250px">
	<p><input type="text" name="nom" id="nom" value="" class="blocPays" size="60"></p>
   </td>
 </tr>
 <tr>
    <td><img src="images/Europe500.gif" width="440" height="500" border="1" usemap="#carte" style="border-color:#336699; ">
    </td>
 </tr>
</table>
 
<map name="carte">
  <area shape="poly" href="#" onMouseOver="affiche(france)" onMouseOut="affiche(efface)" target="_blank" coords="192,361,182,334,173,334,187,311,192,300,168,294,145,275,119,299,91,305,118,341,113,370,153,381,165,366,183,371">
</map>

07/10/2008, 16h31
E.Bzz
Bonjour,
IE permet(tait) d'appeler un objet directement avec son id. De plus, il confond name et id.
C'est pour ça que ça fonctionne (mais c'est un bug) :mrgreen:

Essaye
Code:

1 2 3 function affiche(pays) { document.getElementById('nom').value = pays[0]; }
A+
07/10/2008, 17h05
picoule

Je viens d'essayer le code, qui me parait plus propre ;)

Mais toujours pas de résultat dans firefox ?!
Est-ce normal ?
07/10/2008, 17h10
E.Bzz

Citation:

Envoyé par picoule

Je viens d'essayer le code, qui me parait plus propre

C'était les mêmes ;)

Citation:

Envoyé par picoule

Mais toujours pas de résultat dans firefox ?!
Est-ce normal ?

Ben, y a pas de raison visible ...
Ta partie <script> est bien dans le <head> ?

On peut voir tout le code ?

A+

voici le code en entier :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemple de rollover</title>
<style type="text/css">
.blocPays {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bolder;
	border: 0px solid #FFFFFF;
	margin-left:15px;
	background-color:#336699; 
	color:#FFFFFF
}
</style>
<script language="javascript">
<!-- The following fields contain : name - contact - address1 - address2 - tel - email -->
<!-- Pour essayer de faire s'afficher les infos sous firefox : onMouseOver="pays(event);" -->
efface = new Array("");
france = new Array("FRANCE");
 
function affiche(pays) {
  document.getElementById('nom').value = pays[0];
}
</script>
 
</head>
 
<body>
<table width="800px"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="background-color:#336699; color:#FFFFFF;" valign="top" width="250px">
	<p>
		<input type="text" name="nom" value="" class="blocPays" size="60"><br />
	</p>
	</td>
 
    <td>&nbsp;&nbsp;<img src="images/Europe500.gif" width="440" height="500" border="1" usemap="#carte" style="border-color:#336699; ">&nbsp;&nbsp;</td>
	<td style="background-color:#336699; color:#FFFFFF " width="120px" ><img src="pictures/vide.gif" width="100" height="1"></td>
 
  </tr>
</table>
 
<map name="carte">
  <area shape="poly" href="#" onMouseOver="affiche(france)" onMouseOut="affiche(efface)" target="_blank" coords="192,361,182,334,173,334,187,311,192,300,168,294,145,275,119,299,91,305,118,341,113,370,153,381,165,366,183,371">
</map>
</body>
</html>

07/10/2008, 17h30
E.Bzz

Citation:

Envoyé par picoule

Mais toujours pas de résultat dans firefox ?!
Est-ce normal ?

N'ayant pas la carte, l'image (même vide) n'est pas affichée sous FF3.
Pas possible de tester le rollover ...

EDIT : les balises [CODE], c'est avec le bouton # de l'éditeur dans lequel tu saisies tes messages ;)

A+

Tu as oublié de mettre un id à ton input...

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemple de rollover</title>
<style type="text/css">
.blocPays {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bolder;
	border: 0px solid #FFFFFF;
	margin-left:15px;
	background-color:#336699; 
	color:#FFFFFF
}
</style>
<script language="javascript">
<!-- The following fields contain : name - contact - address1 - address2 - tel - email -->
<!-- Pour essayer de faire s'afficher les infos sous firefox : onMouseOver="pays(event);" -->
var efface = new Array("");
var france = new Array("FRANCE");
 
function affiche(pays) {
  document.getElementById('nom').value = pays[0];
}
</script>
 
</head>
 
<body>
<table width="800px"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="background-color:#336699; color:#FFFFFF;" valign="top" width="250px">
	<p>
		<input type="text" name="nom" id="nom" value="" class="blocPays" size="60"><br />
	</p>
	</td>
 
    <td>&nbsp;&nbsp;<img src="images/Europe500.gif" width="440" height="500" border="1" usemap="#carte" style="border-color:#336699; ">&nbsp;&nbsp;</td>
	<td style="background-color:#336699; color:#FFFFFF " width="120px" ><img src="pictures/vide.gif" width="100" height="1"></td>
 
  </tr>
</table>
 
<map name="carte">
  <area shape="poly" href="#" onMouseOver="affiche(france)" onMouseOut="affiche(efface)" target="_blank" coords="192,361,182,334,173,334,187,311,192,300,168,294,145,275,119,299,91,305,118,341,113,370,153,381,165,366,183,371">
</map>
</body>
</html>

07/10/2008, 17h52
E.Bzz

Citation:

Envoyé par Bovino

Tu as oublié de mettre un id à ton input...

8O

Arf ! Je me suis fait eu : j'avais pas vu que c'était toi qui l'avait ajouté :aie:

:king:
08/10/2008, 09h08
picoule

Merci à tous.
C'est très sympa d'avoir de l'aide !
:P