[Tableaux] Caché un tableau et en affiché un autre au survole d'un text

**Nicos77** · 09/11/2005, 11h09

Bonjour,

J'ai une page qui contient 4 liens.

Je voudrais qu'au clique sur un lien on affiche ou cache le tableau qui correspond

Exemple ==> Clique sur Lien1 affiche tab1

Je voudrais aussi qu'au clique sur Lien2 ca cache le "tabOuvert" en l'occurence tab1 et ca ouvre tab2 !!

Merci

**jeff_!** · 09/11/2005, 11h15

salut
ce n'est pas du php mais plutot du javascript

**Nicos77** · 09/11/2005, 11h16

Envoyé par jeff_!

salut
ce n'est pas du php mais plutot du javascript

Ah OK!!!

Mais c'est pas grave si mes pages sont faites en PHP ??

**jeff_!** · 09/11/2005, 11h18

non pas du tout

**Mr N.** · 09/11/2005, 11h18

Tu n'es pas forcé d'utiliser du javascript !!!!
Même je t'encourage à ne pas l'utiliser

**jeff_!** · 09/11/2005, 11h21

ouaii si tu utilise des lien tu a aussi le css
tu n'aura le pb de la desactivation de javscript

**Nicos77** · 09/11/2005, 11h42

Wawww

Je suis un peu perdu !!
Je vous envoi mon code

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<body>
<table width="627" height="484" id="tabGeneral">
  <tr>
    <td width="621" height="0" class="GrosTitredePageGris">Nos Agences : 4 Sites &agrave; votre service </td>
  </tr>
  <tr>
    <td height="155"><p class="InfosSites">Paris Nord Pantin </p>
    <p class="InfosSites">Paris Sud Ivry sur Sein </p>
    <p class="InfosSites">Lyon - V&eacute;nissieux </p>
    <p class="InfosSites">Bordeaux - Montussan </p></td>
  </tr>
  <tr>
    <td height=""><table width="582" height="155" id="tabPantin">
      <tr>
        <td height="89" colspan="2"><p align="center" class="GrosTitredePageRouge"> PANTIN </p>          </td>
        <td width="264"><p align="center" class="TextedePage">2, Rue Davoust - 93500 Pantin </p>
          <p align="center" class="TextedePage">T&egrave;l. : 01. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fax : 01. </p></td>
      </tr>
      <tr>
        <td colspan="2"><img src="images/PlanPantin.gif" alt="Plan  PANTIN" width="300" height="180" /></td>
        <td><p align="center" class="TextedePage">Ouvert du lundi au vendredi </p>
          <p align="center" class="TextedePage"><strong>de 8h30 &agrave; 12h30 et de 14h00 &agrave; 18h00</strong></p>
          <p align="center"><span class="TextedePage"><strong>(17h00 le vendredi )</strong></span><strong> </strong></p></td>
      </tr>
 
    </table>
      <table width="582" height="155" id="tabIvry">
        <tr>
          <td height="89" colspan="2"><p align="center" class="GrosTitredePageRouge">IVRY </p></td>
          <td width="264"><p align="center" class="TextedePage">14 - 15, - 94200 Ivry sur Seine </p>
              <p align="center" class="TextedePage">T&egrave;l. : 01..36&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fax : 01. </p></td>
        </tr>
        <tr>
          <td colspan="2"><img src="images/PlanIvry.jpg" alt="Plan ;ces IVRY" width="300" height="184" /></td>
          <td><p align="center" class="TextedePage">Ouvert du lundi au vendredi </p>
              <p align="center" class="TextedePage"><strong>de 8h30 &agrave; 12h30 et de 14h00 &agrave; 18h00</strong></p>
            <p align="center"><span class="TextedePage"><strong>(17h00 le vendredi )</strong></span><strong> </strong></p></td>
        </tr>
      </table>
      <table width="582" height="155" id="tabLyon">
        <tr>
          <td height="89" colspan="2"><p align="center" class="GrosTitredePageRouge"> LYON </p></td>
          <td width="264"><p align="center" class="TextedePage">21,   - 69200 V&eacute;nissieux </p>
              <p align="center" class="TextedePage">T&egrave;l. : 04&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fax : 04 </p></td>
        </tr>
        <tr>
  LYON" width="295" height="237" /></td>
          <td><p align="center" class="TextedePage">Ouvert du lundi au vendredi </p>
              <p align="center" class="TextedePage"><strong>de 8h00 &agrave; 12h00 et de 14h00 &agrave; 18h00</strong></p>
              <p align="center"><span class="TextedePage"><strong>(17h00 le vendredi )</strong></span><strong> </strong></p></td>
        </tr>
      </table>
      <table width="582" height="155" id="tabBordeaux">
        <tr>
          <td height="89" colspan="2"><p align="center" class="GrosTitredePageRouge"> BORDEAUX </p></td>
          <td width="264"><p align="center" class="TextedePage">39,   - 33450 Montussan </p>
              <p align="center" class="TextedePage">T&egrave;l. : 05.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fax : 05. </p></td>
        </tr>
        <tr>
          <td colspan="2">&nbsp;</td>
          <td><p align="center" class="TextedePage">Ouvert du lundi au vendredi </p>
              <p align="center" class="TextedePage"><strong>de 8h00 12h00 et de 14h00 &agrave; 18h00</strong></p>
              <p align="center"><span class="TextedePage"><strong>(17h00 le vendredi )</strong></span><strong> </strong></p></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>

Je voudrais qu'au clique sur
Paris Nord Pantin afficher tabPantin
Paris Sud Ivry sur Sein afficher tabIvry
Lyon - Vénissieux afficher tabLyon
Bordeaux - Montussan afficher tabBordeaux

et caché les autres !!!

Merci

**Mr N.** · 09/11/2005, 11h59

Code :

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

1
2
<p class="InfosSites"><a href="?tab=paris">Paris Sud Ivry sur Sein </a></p>
<p class="InfosSites"><a href="?tab=lyon">Lyon - V&eacute;nissieux </a></p>

et pour les tableau tu peux faire par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
switch($_REQUEST['tab']) {
   case 'paris':
      //Tu affiche les données de paris
      break;
   case 'lyon':
      //Tu affiche les données de lyon
      break;
   case ....
   default:
      //...
      break;
}

**thanathz** · 09/11/2005, 12h09

il fait un peu mal à la tête ton code!

tiens j'ai répondu à une question un peu similaire ici:
http://www.developpez.net/forums/viewtopic.php?t=416294

tiens regarde.

**Nicos77** · 09/11/2005, 12h29

de mon côté j'ai trouver ça !!

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<style type="text/css" media="all">
	/* Ce style CSS ne dois pas être enlevé, sinon les divs ne se cacherons pas ... */
	.cachediv {
		visibility: hidden;
		overflow: hidden;
		height: 1px;
		margin-top: -1px;
		position: absolute;
	}
</style>
<!-- Script créé par KevBrok ;-) -->
<script type="text/javascript">
	/*
	* Montre / Cache un div
	*/
	function DivStatus( nom, numero )
		{
			var divID = nom + numero;
			if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
				{
					Pdiv = document.getElementById( divID );
					PcH = true;
		 		}
			else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
				{
					Pdiv = document.all[ divID ];
					PcH = true;
				}
			else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
				{
					Pdiv = document.layers[ divID ];
					PcH = true;
				}
			else
				{
 
					PcH = false;
				}
			if ( PcH )
				{
					Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv';
				}
		}
 
	/*
	* Cache tous les divs ayant le même préfixe
	*/
	function CacheTout( nom )
		{	
			var NumDiv = 1;
			if ( document.getElementById ) // Pour les navigateurs récents
				{
					while ( document.getElementById( nom + NumDiv) )
						{
							SetDiv = document.getElementById( nom + NumDiv );
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.all ) // Pour les veilles versions
				{
					while ( document.all[ nom + NumDiv ] )
						{
							SetDiv = document.all[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.layers ) // Pour les très veilles versions
				{
					while ( document.layers[ nom + NumDiv ] )
						{
							SetDiv = document.layers[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
		}
 
	/*
	* Montre tous les divs ayant le même préfixe
	*/
	function MontreTout( nom )
		{	
			var NumDiv = 1;
			if ( document.getElementById ) // Pour les navigateurs récents
				{
					while ( document.getElementById( nom + NumDiv) )
						{
							SetDiv = document.getElementById( nom + NumDiv );
							if ( SetDiv && SetDiv.className != '' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.all ) // Pour les veilles versions
				{
					while ( document.all[ nom + NumDiv ] )
						{
							SetDiv = document.all[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != '' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.layers ) // Pour les très veilles versions
				{
					while ( document.layers[ nom + NumDiv ] )
						{
							SetDiv = document.layers[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != '' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
		}
 
	/*
	* Inverse les divs: Cache les divs visible et montre le divs cachés :)
	*/
	function InverseTout( nom )
		{	
			var NumDiv = 1;
			if ( document.getElementById ) // Pour les navigateurs récents
				{
					while ( document.getElementById( nom + NumDiv ) )
						{
							SetDiv = document.getElementById( nom + NumDiv );
							DivStatus( nom, NumDiv );
							NumDiv++;
						}
				}
			else if ( document.all ) // Pour les veilles versions
				{
					while ( document.all[ nom + NumDiv ] )
						{
							SetDiv = document.all[ nom + NumDiv ];
							DivStatus( nom, NumDiv );
							NumDiv++;
						}
				}
			else if ( document.layers ) // Pour les très veilles versions
				{
					while ( document.layers[ nom + NumDiv ] )
						{
							SetDiv = document.layers[ nom + NumDiv ];
							DivStatus( nom, NumDiv );
							NumDiv++;
						}
				}
		}
</script>

Ca fonctionne presque Nikel !!

Comment appel t'on une fonction au chargement de la page? En l'occurence "Cachetout"
Lorsque tout est caché mes titre se décale en haut ! Why?

Merci @ tous

**thanathz** · 09/11/2005, 12h32

c'est du javascrpit... il y a un forum pour ça...
Je t'ai aussi filé un lien... un peu d'huile de coude et tu trouvais ta réponse:

Code :

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

<script language="javascript">CacheTout( nom );</script>

**Nicos77** · 09/11/2005, 13h59

Merci @ vous...

[Tableaux] Caché un tableau et en affiché un autre au survole d'un text

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager