Discussion :

[avogadro]

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 :

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

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

<div align="center" id="map_zone"></div>

Puis j'ai une listbox faites comme cela :

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

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

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 :

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

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

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

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

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

[avogadro]

c'est pas si facile hein

Il y a quoi qui bloque pour vous? Perso j'ai testé pas mal de truc, j'ai mis le image mapping un peu partout mais rien y fait ><

[masu]

il faut pas mettre un # devant la valeur du usemap

Code :

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

<img src="../imgs/bg.gif" border="0" id="carte" alt="carte" usemap="#Region" />

[avogadro]

buahaha, ta géré bien vu, dans mon projet d'avant il y été j'ai du l'oublier ici, fallait le voir, chapeau :}

merci beaucoup !