Gestion des attributs hidden et visible

Version imprimable

Bonjour à tous,
Je souhaite réaliser la chose suivante à l'intérieur de ma page :

Code:

1
2
3
4
5
 
-------------------------------
IMAGE1        |                 |
IMAGE2        |                 |
-------------------------------

Par défault contenu1 est dans le cadre. Si on clique sur IMAGE2, contenu1 disparait pour laisser place à contenu2.
Voila le code HTML

Code:

1
2
3
4
5
6
7
8
9
10
 
<a href="javascript:montre('txt_boutique');"><img border="0" src="images/Boutons/AccueilBout1.gif"></a><br>
			<a href="javascript:montre('txt_agenRugby');"><img border="0" src="images/Boutons/AccueilAgenR1.gif"></a><br>
 
<div id="txt_boutique" style="z-index:40;">
<p align="justify" class="bloc"> pouet txt_boutique<p>
</div>
<div id="txt_agenRugby" style="z-index:40; visibility : hidden"">
<p align="justify" class="bloc"> pouet txt_agenRugby</p>
</div>

et le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function montre(object){
   cache(document.getElementById('txt_boutique'))
   cache(document.getElementById('txt_agenRugby'))
   cache(document.getElementById('txt_partenaires'))
   cache(document.getElementById('txt_news'))
   cache(document.getElementById('txt_centre'))
   document.getElementById('object').style.visibility = "visible"
}
 
function cache(object){
   object.style.visibility = "hidden"
}

Le problème est que au chargement de la page le contenu1 est présent dans le bloc puis on peut cliquer sur IMAGE2 le contenu disparait mais plus rien n'apparait !

14/04/2006, 09h52
SpaceFrog

Code:

<div id="txt_agenRugby" style="z-index:40; visibility : hidden"">

y'a un quote en trop là ...
14/04/2006, 09h53
Oluha

à déplacer dans la partie javascript
14/04/2006, 09h55
Jibees
Oui pas bete ;)
Bon ca ne fonctionne pas plus mais bon ..;
En fait j'ai une erreur javacript
Code:

1 2 3 Erreur : document.getElementById("object") has no properties Ligne : 40
et la ligne en question :
Code:

1 2 cache(document.getElementById('txt_centre'))
14/04/2006, 09h56
Jibees

Citation:

Envoyé par Oluha

à déplacer dans la partie javascript

Ca en vient de la partie Javascript. Il me semble qu'il y autant de javascript que de HTML/CSS d'ou mon indécision...
14/04/2006, 09h57
Oluha

t'as mis des quotes alors qu'il en faut pas

Code:

document.getElementById(object)

de plus je me demande si c'est pas un mot réservé
14/04/2006, 09h57
Oluha

Citation:

Envoyé par Jibees

Citation:

Envoyé par Oluha

à déplacer dans la partie javascript

Ca en vient de la partie Javascript. Il me semble qu'il y autant de javascript que de HTML/CSS d'ou mon indécision...

ben c'est une erreur javascript :arrow: forum javascript

Nous voici dans le bon forum. Du coup en remplacant le terme Object (éventuellement pris) par celui d'objet, je me retrouve avec l'erreur suivante :
Erreur : objet has no properties
Ligne : 44

Voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function montre2(objet){ cache(document.getElementById(txt_boutique)) cache(document.getElementById(txt_agenRugby)) cache(document.getElementById(txt_partenaires)) cache(document.getElementById(txt_news)) cache(document.getElementById(txt_centre)) document.getElementById(objet).style.visibility = "visible" } function cache(objet){ /*Ligne 44*/ objet.style.visibility = "hidden" }

14/04/2006, 10h19
SpaceFrog

je ne vois pas d'objet text_centre ...

Oui pardon. Par souci de lisibilité j'ai choisi de ne pas mettre tout le code source HTML, puisque cété la même chose. Je le mets ici :

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
33
34
35
36
37
38
 
 
<a href="javascript:montre2('txt_boutique');">
<img border="0" src="images/Boutons/AccueilBout1.gif"></a><br>
			<a href="javascript:montre2('txt_agenRugby');">
<img border="0" src="images/Boutons/AccueilAgenR1.gif"></a><br>
			<a href="javascript:montre2('txt_partenaires');">
<img border="0" src="images/Boutons/AccueilPartenaires1.gif"></a><br>
			<a href="javascript:montre2('txt_news');">
<img border="0" src="images/Boutons/AccueilNewsAsso1.gif"></a><br>
			<a href="javascript:montre2('txt_centre');">
<img border="0" src="images/Boutons/AccueilCenteF1.gif"></a></td>
        <td width="2" height="151" valign="bottom">
<img border="0" src="images/CadreMilieuBoutAccueil.gif"></a></td>
        <td width="286" height="151">
 
        <!-- les données associés -->
<div id="txt_boutique" style="z-index:40;">
<p align="justify" class="bloc"> pouet txt_boutique<p>
</div>
<div id="txt_agenRugby" style="z-index:40; visibility: hidden;">
<p align="justify" class="bloc"> pouet txt_agenRugby</p>
</div>
<div id="txt_partenaires" style="z-index:40; visibility: hidden;">
<p align="justify" class="bloc"> pouet txt_partenaires</p>
</div>
<div  id="txt_news" style="z-index:40; visibility: hidden;">
<p align="justify" class="bloc"> pouet txt_news</p>
</div>
<div id="txt_centre" style="z-index:40; visibility: hidden;">
<p align="justify" class="bloc"> pouet txt_centre</p>
</div>
 
 
 
 
 
        </td>

14/04/2006, 11h28
SpaceFrog
si tu passes un string en paramètre faut pas t'attendre à autre chose :roll:
Code:

1 2 3 4 function cache(objet){ /*Ligne 44*/ document.getElementById(objet).style.visibility = "hidden" }
14/04/2006, 11h33
Jibees

Donc je remplace par quoi ?
Je ne vois pas la.
14/04/2006, 11h35
SpaceFrog

????
ben regarde la différence entre ma focntion et la tienne ....

tu passes du texte à la focntion, pas un objet !!!
14/04/2006, 11h38
Jibees
Ok pardon complétement à la rue sur le coup. Vivement le weekend ...
Bon ca ne fonctionne pas vraiment plus mais on s'approche. une nouvelle erreur :
Code:

1 2 3 Erreur : document.getElementById(objet) has no properties Ligne : 44

mais du coup c pas un peu génant ... en fait la méthode cache est appelé uniquement avec la méthode montre2 ou il y a déja un getElementbyId... Ce qui en fait deux en fait ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function montre2(objet){
 
 
   cache(document.getElementById(txt_boutique))
   cache(document.getElementById(txt_agenRugby))
   cache(document.getElementById(txt_partenaires))
   cache(document.getElementById(txt_news))
   cache(document.getElementById(txt_centre))
   document.getElementById(objet).style.visibility = "visible"
}
 
function cache(objet){
   document.getElementById(objet).style.visibility = "hidden" 
}

14/04/2006, 11h50
SpaceFrog

ta fonction c'est montre() ou montre2() :?
14/04/2006, 11h56
Jibees

oui montre2 pardon.

Desole si c'est moi qui t'ai renseigné ce code, mais il y a des fautes dedans.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function montre2(objet){ 
   cache(document.getElementById(txt_boutique)) 
   cache(document.getElementById(txt_agenRugby)) 
   cache(document.getElementById(txt_partenaires)) 
   cache(document.getElementById(txt_news)) 
   cache(document.getElementById(txt_centre)) 
   document.getElementById(objet).style.visibility = "visible" 
} 
 
function cache(objet){ 
   document.getElementById(objet).style.visibility = "hidden" 
}

Voci le version corrigée :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
<a href="javascript:montre2('txt_boutique');"> 
<img border="0" src="images/Boutons/AccueilBout1.gif"></a><br> 
         <a href="javascript:montre2('txt_agenRugby');"> 
<img border="0" src="images/Boutons/AccueilAgenR1.gif"></a><br> 
         <a href="javascript:montre2('txt_partenaires');"> 
<img border="0" src="images/Boutons/AccueilPartenaires1.gif"></a><br> 
         <a href="javascript:montre2('txt_news');"> 
<img border="0" src="images/Boutons/AccueilNewsAsso1.gif"></a><br> 
         <a href="javascript:montre2('txt_centre');"> 
<img border="0" src="images/Boutons/AccueilCenteF1.gif"></a></td> 
        <td width="2" height="151" valign="bottom"> 
<img border="0" src="images/CadreMilieuBoutAccueil.gif"></a></td> 
        <td width="286" height="151"> 
 
        <!-- les données associés --> 
<div id="txt_boutique" style="z-index:40;"> 
<p align="justify" class="bloc"> pouet txt_boutique<p> 
</div> 
<div id="txt_agenRugby" style="z-index:40; visibility: hidden;"> 
<p align="justify" class="bloc"> pouet txt_agenRugby</p> 
</div> 
<div id="txt_partenaires" style="z-index:40; visibility: hidden;"> 
<p align="justify" class="bloc"> pouet txt_partenaires</p> 
</div> 
<div  id="txt_news" style="z-index:40; visibility: hidden;"> 
<p align="justify" class="bloc"> pouet txt_news</p> 
</div> 
<div id="txt_centre" style="z-index:40; visibility: hidden;"> 
<p align="justify" class="bloc"> pouet txt_centre</p> 
</div> 
 
<script>
function montre2(objet){ 
   cache(document.getElementById("txt_boutique")) 
   cache(document.getElementById("txt_agenRugby")) 
   cache(document.getElementById("txt_partenaires")) 
   cache(document.getElementById("txt_news")) 
   cache(document.getElementById("txt_centre")) 
   document.getElementById(objet).style.visibility = "visible" 
} 
 
function cache(objet){ 
   objet.style.visibility = "hidden" 
}
</script>

J'ai testé et ca marche.
si tu veux un plus beau resultat, utilise ceci à la place de visibility :

Code:

objet.style.display = "none"

Code:

document.getElementById(objet).style.display = "block"

Fremy

Code complet avec display

Voici un code complet avec display

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<body>
<a href="javascript:montre2('txt_boutique');"> 
<img border="0" src="images/Boutons/AccueilBout1.gif"></a><br> 
         <a href="javascript:montre2('txt_agenRugby');"> 
<img border="0" src="images/Boutons/AccueilAgenR1.gif"></a><br> 
         <a href="javascript:montre2('txt_partenaires');"> 
<img border="0" src="images/Boutons/AccueilPartenaires1.gif"></a><br> 
         <a href="javascript:montre2('txt_news');"> 
<img border="0" src="images/Boutons/AccueilNewsAsso1.gif"></a><br> 
         <a href="javascript:montre2('txt_centre');"> 
<img border="0" src="images/Boutons/AccueilCenteF1.gif"></a><br />
<img border="0" src="images/CadreMilieuBoutAccueil.gif"></a><
 
        <!-- les données associés --> 
<div id="txt_boutique" style="z-index:40;"> 
<p align="justify" class="bloc"> pouet txt_boutique<p> 
</div> 
<div id="txt_agenRugby" style="z-index:40; display: none;"> 
<p align="justify" class="bloc"> pouet txt_agenRugby</p> 
</div> 
<div id="txt_partenaires" style="z-index:40; display: none;"> 
<p align="justify" class="bloc"> pouet txt_partenaires</p> 
</div> 
<div  id="txt_news" style="z-index:40; display: none;"> 
<p align="justify" class="bloc"> pouet txt_news</p> 
</div> 
<div id="txt_centre" style="z-index:40; display: none;"> 
<p align="justify" class="bloc"> pouet txt_centre</p> 
</div> 
 
<script>
function montre2(objet){ 
   cache(document.getElementById("txt_boutique")) 
   cache(document.getElementById("txt_agenRugby")) 
   cache(document.getElementById("txt_partenaires")) 
   cache(document.getElementById("txt_news")) 
   cache(document.getElementById("txt_centre")) 
   document.getElementById(objet).style.display = "block" 
} 
 
function cache(objet){ 
   objet.style.display = "none" 
}
</script>
</body>
</html>

14/04/2006, 13h58
Jibees

et la du coup ca marche parfaitement !!!
je te remercie, passe un bon weekend ;)