Erreur obscure : FF et IE (défit)
Bonjour,
alors voila je tombe sur une erreur, sous IE et FF ça ne réagit pas de la même façon, normal vous me direz (dans certains cas) mais regardez plutot :
d'abord j'ai un tableau bati de cette façon :
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
| <table>
<tr>
<td align="left"><div id="div_haut" onmouseover="active('H')" onmouseout="desactive()" style="background-image: url(../imgs/haut.jpg);width:22px;height:22px"></div></td>
<td align="right"><div id="div_bas" onmouseover="active('B')" onmouseout="desactive()" style="background-image: url(../imgs/bas.jpg);width:22px;height:22px"></div></td>
</tr>
<tr>
<td colspan="2">
<div id="map" align="center">
<table width="auto" border="0">
<div align="center">
<tr>
<td>
<img src="../imgs/bg.gif" border="0" id="carte" alt="carte" usemap="Region" />
</td>
</tr>
</div>
</table>
</div>
</td>
</tr>
<tr>
<td align="left"><div id="div_gauche" onmouseover="active('G')" onmouseout="desactive()" style="background-image: url(../imgs/gauche.jpg);width:22px;height:22px"></div></td>
<td align="right"><div id="div_droit" onmouseover="active('D')" onmouseout="desactive()" style="background-image: url(../imgs/droite.jpg);width:22px;height:22px"></div></td>
</tr>
</table>
</div>
<br/>
<div align="center" id="map_zone"></div>
<br/><br/>
</td>
</tr>
</table> |
ce qui va nous interesser est ceci
Code:
<div align="center" id="map_zone"></div>
Puis j'ai une listbox faites comme cela :
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
| <select id="map_name" onchange="select_change(this);">
<option value="none">Regions Administratives</option>
<option value="ALSACE">Alsace</option>
<option value="AQUITAINE">Aquitaine</option>
<option value="AUVERGNE">Auvergne</option>
<option value="BOURGOGNE">Bourgogne</option>
<option value="BRETAGNE">Bretagne</option>
<option value="CENTRE">Centre</option>
<option value="CHAMPAGNE_ARDENNE">Champagne-Ardenne</option>
<option value="CORSE">Corse</option>
<option value="FRANCHE_COMTE">Franche-Comté</option>
<option value="ILE_DE_FRANCE">Ile de France</option>
<option value="LANGUEDOC_ROUSSILLON">Languedoc-Roussillon</option>
<option value="LIMOUSIN">Limousin</option>
<option value="LORRAINE">Lorraine</option>
<option value="MIDI_PYRENEES">Midi-Pyrénées</option>
<option value="NORD_PAS_DE_CALAIS">Nord-Pas de Calais</option>
<option value="HAUTE_NORMANDIE">Haute Normandie</option>
<option value="BASSE_NORMANDIE">Basse Normandie</option>
<option value="PAYS_DE_LA_LOIRE">Pays de la Loire</option>
<option value="PICARDIE">Picardie</option>
<option value="POITOU_CHARENTES">Poitou-Charentes</option>
<option value="PROVENCE_ALPES_COTE_D_AZAUR">Provence-Alpes-Côte d'Azur</option>
<option value="RHONE_ALPES">Rhône-Alpes</option>
</select> |
Elle appelle comme vous le voyez la fonction select_change(this); dont le code est :
Code:
1
2
3
4
5
| function select_change(object)
{
document.getElementById("carte").src = '../imgs/regions/' + object.value + '.jpg';
map_change(object.value);
} |
qui elle meme appelle map_change(object.value);, celle ci est dans un js externe, fait de cette façon :
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
| var ALSACE_map =
'<map name="Region" border="0">' +
'<area shape="rect" coords="248,202,268,222" href="../html/robot.htm">' +
'<area shape="rect" coords="146,407,166,423" href="../html/robot.htm">' +
'<area shape="rect" coords="143,535,162,555" href="../html/robot.htm">' +
'</map>' +
'Ville : <select id="town_name" onchange="#">' +
'<option value="strasbourg">Strasbourg</option>' +
'<option value="Mulhouse">Mulhouse</option>' +
'<option value="Colmar">Colmar</option>';
var BOURGOGNE_map =
'<map name="Region" border="0">' +
'<area shape="rect" coords="248,202,268,222" href="../html/robot.htm">' +
'<area shape="rect" coords="146,407,166,423" href="../html/robot.htm">' +
'<area shape="rect" coords="143,535,162,555" href="../html/robot.htm">' +
'</map>';
function map_change(name)
{
switch(name)
{
case "ALSACE":
document.getElementById('map_zone').innerHTML = ALSACE_map;
break;
case "BOURGOGNE":
document.getElementById('map_zone').innerHTML = BOURGOGNE_map;
break;
}
} |
Explication du principe : lorsque vous faite une selection dans la listbox, automatiquement le navigateur va charger une image dans
Code:
<img src="../imgs/bg.gif" border="0" id="carte" alt="carte" usemap="Region" />
en changeant la source, mais ce n'est pas tout, entre les balise
Code:
<div align="center" id="map_zone"></div>
il va y déposer de l'image mamping, des zones cliquable sur la photo en bref ainsi qu'une listbox suplémentaire.
Problèmes rencontrés : l'image se charge c'est bon, la listbox suplémentaire s'affiche c'est bon, je pense que le code de l'image maping se met aussi entre les balises car ça fonctionne sous FF mais pas sous IE, c'est a dire qu'il n'y a pas de zones cliquables présentes...
Si vous avez des question hésitez pas, en espérant avoir été assez claire!
Merci de votre aide !
