[POO] code valable sous IE et non sous Firefox

**picoule** · 07/10/2008, 16h18

Bonjour,

Pour afficher dans une cellule de tableau, des informations sur une zone survolée, j'ai utilisé :

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

**Bovino** · 07/10/2008, 16h27

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 :

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

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

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

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

**E.Bzz** · 07/10/2008, 16h31

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)

Essaye

Code :

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

1
2
3
function affiche(pays) {
  document.getElementById('nom').value = pays[0];
}

A+

**picoule** · 07/10/2008, 17h05

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

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

**E.Bzz** · 07/10/2008, 17h10

Envoyé par picoule

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

C'était les mêmes

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+

**picoule** · 07/10/2008, 17h18

voici le code en entier :

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

**E.Bzz** · 07/10/2008, 17h30

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+

**Bovino** · 07/10/2008, 17h36

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

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