Chargement d'une variable dans une autre page

**Ghost0000** · 25/04/2013, 10h44

Bonjour, je vous expose mon problème :

Je dispose de la carte interactive suivante avec 3 boutons de SWITCH
Voici l'image :

Lorsque je clic sur le bouton n"2 (bouton tableur excel) PUIS QUE JE CLIC SUR UNE ZONE DE LA CARTE (donc je change de page), j'aimerai que cela m'affiche le menu suivant sur la seconde page (mais uniquement lors d'un clic sur le bouton 2 de la carte principale):

Lors d'un clic sur le bouton 1 ou 3 de la carte principale j'aimerai ce menu sur les autres pages des zones cliquables:

Mon problème vient du fait que le clic sur le bouton 2 (bouton excel de la carte principale) n'est pas mémoriser d'une page a l'autre. Cela se passe sur le javascipt mais je ne connais pas le code fonctionnel.

Voici le code html (carte principale) :

Code html :

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
<!-- Mise en place du menu de sélection pour la navigation entres les pages-->
<!-- Menu du bas (fond bleu avec ombre)-->
<div id="menubas" style="POSITION: absolute; MARGIN-LEFT:74.6%; MARGIN-TOP:375px">
	<img id="menubas" NAME="imgbas" src="../include/image/menu/menu.png" width="230" height="80" border="0" />
</div>
<!-- Positionnement du menu -->
	<div id="menubas" style="POSITION: absolute; MARGIN-LEFT:76%; MARGIN-TOP:380px">
		<table border="0"><tr>
			<!-- Bouton pour l'accès à la carte Top -->
			<td>
				<a>
				<img id=topkapi NAME=imgtopkapi onclick="Zone(1)" src="../include/image/boutons/topkapi.png" width="60" height="60" border="0" usemap="#topkapi" title="Accès Topkapi"/>
				</a>
			</td>
			<!-- Bouton pour l'accès à la carte BD -->
			<td>
				<a>
				<img id=bdlt NAME=imgbdlt onclick="Zone(2)" src="../include/image/boutons/ExcelN.png" width="60" height="60" border="0" usemap="#bdlt"  title="Accès BDLT"/>
				</a>
			</td>
			<!-- Bouton pour l'accès à carte PTI -->
			<td>
				<a>
				<img id=pti NAME=imgpti onclick="Zone(3)" src="../include/image/boutons/PTIN.png" width="60" height="60" border="0" usemap="#pti"  title="Accès BD-PTI"/>
				</a>
			</td>
		</table>
</body>
</html>

Code javascript (carte principale):

Code javascript :

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
//-------------------------------------------------------------------------------------------------------------------
// Cette fonction affiche les boutons sur la carte principale :
function Zone(seq)
{
  // Récupération universelle de l'élément "boutons"
  var oImgtopkapi = document.getElementById('topkapi'); //Topkapi
  var oImgbdlt = document.getElementById('bdlt'); //BDLT
  var oImgpti = document.getElementById('pti'); //BD-PTI
  var x;
 
 //-------------------------------------------------------------------------------------------------------------------
	// Affichage des boutons :
	if (seq ==1) //Zone Topkapi
	{
	oImgtopkapi.src = "../include/image/boutons/topkapi.png"
	oImgbdlt.src = "../include/image/boutons/exceln.png"
	oImgpti.src = "../include/image/boutons/ptin.png"
	x=0;
	}
 
	if (seq ==2) //Zone BDLT
	{
	oImgtopkapi.src = "../include/image/boutons/topkapin.png"
	oImgbdlt.src = "../include/image/boutons/excel.png"
	oImgpti.src = "../include/image/boutons/ptin.png"
	x=1;
	}
 
	if (seq ==3) //Zone BD-PTI
	{
	oImgtopkapi.src = "../include/image/boutons/topkapin.png"
	oImgbdlt.src = "../include/image/boutons/exceln.png"
	oImgpti.src = "../include/image/boutons/pti.png"
	x=0;
	}
}
 
//-------------------------------------------------------------------------------------------------------------------
// Cette fonction affiche les boutons sur les cartes secondaires :
function EP_AS(seq)
{
  // Récupération universelle de l'élément "boutons"
  var oImgEP = document.getElementById('EP'); //Eau Potable
  var oImgAS = document.getElementById('AS'); //Assainissement
 
//-------------------------------------------------------------------------------------------------------------------
	// Affichage des boutons :
	if (seq ==1) //Eau Potable
	{
	oImgEP.src = "../include/image/boutons/Eaupotable.png"
	oImgAS.src = "../include/image/boutons/AssainissementN.png"
	}
 
	if (seq ==2) //Assainissement
	{
	oImgEP.src = "../include/image/boutons/EaupotableN.png"
	oImgAS.src = "../include/image/boutons/Assainissement.png"
	}
}

Code html d'une zone de la carte : (juste la navigation)

Code html :

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
<!-- Mise en place du menu de sélection pour la navigation entres les pages-->
<!-- Menu du bas (fond bleu avec ombre)-->
<div id="menub" style="POSITION: absolute; MARGIN-LEFT:74.6%; MARGIN-TOP:375px">
	<img id=menub NAME=imgb src="../include/image/menu/menu.png" width="230" height="80" border="0" style="visibility:visible;"/>
</div>
<!-- Positionnement du menu -->
<div id="menub" style="POSITION: absolute; MARGIN-LEFT:76%; MARGIN-TOP:380px">
	<table border="0"><tr>
		<!-- Bouton Eau Potable -->
		<td>
			<a>
			<img id=EP NAME=imgEP onclick="EP_AS(1)" src="../include/image/boutons/Eaupotable.png" width="60" height="60" border="0" usemap="#topkapi" title="Eau Potable" style="visibility:visible;"/>
			</a>
		</td>
		<!-- Bouton Assainissement -->
		<td>
			<a>
			<img id=AS NAME=imgAS onclick="EP_AS(2)" src="../include/image/boutons/Assainissementn.png" width="60" height="60" border="0" usemap="#bdlt"  title="Assainissement" style="visibility:visible;"/>
			</a>
		</td>
		<!-- Bouton Retour -->
		<td>
			<a href="./CARTE_topkapi.html">
								<img id=retour NAME=retour src="../include/image/boutons/Retour.png" width="60" height="60" border="0" usemap="#pti"  title="Retour à la carte de l'entreprise régional"/>
			</a>
		</td>
	</div>
	</table>
</body>
</html>

Voila ce que je voudrai faire :

Carte Principale --> sélection bouton 1,2 ou 3 :
1/ Clic sur Bouton 1 --> Clic sur une des zones de la carte (aréa) --> affichage du bouton retour
2/ Clic sur Bouton 2 --> Clic sur une des zones de la carte (aréa) --> affichage du menu avec bouton retour
3/ Clic sur Bouton 3 --> Clic sur une des zones de la carte (aréa) --> affichage du bouton retour

Merci d'avance.

Cordialement.

**pinguix** · 03/05/2013, 17h08

Salut,
Au passage très belle présentation

, pour ton problème je pense que des arguments "?position=excel" a ta page pourrais t'aider si tu peut utiliser du PHP sinon, des ancres ferais très bien l'affaire "#excel", je m'explique lors du click sur un bouton tu redirige l'utilisateur vers la même page (index.html#excel) tu pourras ensuite récupérer en javascript ce qu'il y a après le # dans mon exemple "excel" et effectuer des conséquence : masquer des boutons etc ...
En espérant t'avoir aidé.