Gestion des attributs hidden et visible

**Jibees** · 14/04/2006, 09h42

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

Code :

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

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 :

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

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 :

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

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 !

**SpaceFrog** · 14/04/2006, 09h52

Code :

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

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

y'a un quote en trop là ...

**Oluha** · 14/04/2006, 09h53

à déplacer dans la partie javascript

**Jibees** · 14/04/2006, 09h55

Oui pas bete

Bon ca ne fonctionne pas plus mais bon ..;
En fait j'ai une erreur javacript

Code :

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

1
2
3
 
Erreur : document.getElementById("object") has no properties
Ligne : 40

et la ligne en question :

Code :

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

1
2
 
cache(document.getElementById('txt_centre'))

**Jibees** · 14/04/2006, 09h56

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

**Oluha** · 14/04/2006, 09h57

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

Code :

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

document.getElementById(object)

de plus je me demande si c'est pas un mot réservé

**Oluha** · 14/04/2006, 09h57

Envoyé par Jibees

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

forum javascript

**Jibees** · 14/04/2006, 10h10

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 :

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

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"
}

**SpaceFrog** · 14/04/2006, 10h19

je ne vois pas d'objet text_centre ...

**Jibees** · 14/04/2006, 10h21

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 :

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

**SpaceFrog** · 14/04/2006, 11h28

si tu passes un string en paramètre faut pas t'attendre à autre chose

Code :

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

1
2
3
4
function cache(objet){ /*Ligne 44*/
 
   document.getElementById(objet).style.visibility = "hidden"
}

**Jibees** · 14/04/2006, 11h33

Donc je remplace par quoi ?
Je ne vois pas la.

**SpaceFrog** · 14/04/2006, 11h35

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

tu passes du texte à la focntion, pas un objet !!!

**Jibees** · 14/04/2006, 11h38

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 :

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

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

**Jibees** · 14/04/2006, 11h50

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 :

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

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" 
}

**SpaceFrog** · 14/04/2006, 11h50

ta fonction c'est montre() ou montre2()

**Jibees** · 14/04/2006, 11h56

oui montre2 pardon.

**FremyCompany** · 14/04/2006, 12h40

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

Code :

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

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 :

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

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

objet.style.display = "none"

et

Code :

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

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

Fremy

**FremyCompany** · 14/04/2006, 12h58

Voici un code complet avec display

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

**Jibees** · 14/04/2006, 13h58

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

Gestion des attributs hidden et visible

JavaScript

Vue hybride

Discussions similaires

Partager

Partager