Afficher en deux temps ...

Version imprimable

09/10/2005, 18h27
DJPi

Afficher en deux temps ...
Bonjour,
Tout d'abord, désolé pour mon sujet qui n'est pas très explicite ... :?
Je suis plus que débutant en Javascript et j'aimerai savoir comment faire pour réaliser un mini script javascript. Je m'explique. J'ai par exemple 3 catégories:
* Internet
* Sports
* Cuisine
et ces trois catégories comporte une description. J'aimerai que cette description s'affiche en cliquant sur un des 3 liens. (un peu comme les menus dynamique a plusieurs étages)
EXEMPLE :
Code:

1 2 3 4 5 * Internet (pas de clique dessus, donc pas de description) * Sports (description en dessous car un clique dessus) DESCRIPTION DE SPORT * Cuisine (pas de clique dessus, donc pas de description)
Si quelqu'un a une idée ... Merci d'avance

DJPi
10/10/2005, 09h42
Mr N.

Ben justement, pourquoi tu ne prendrais pas un "menu à plusieurs étages" ?

Un petite ou une grosse description ?
Pour une petite, tu as l'info-bulle.
Une pas mal 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
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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
   <TITLE>Scripts DHTML - Une autre infobulle.</TITLE>
   <META NAME="Author" CONTENT="Van Lancker Luc">
   <META NAME="Description" CONTENT="Trucs et astuces DHTML. Des scripts DHTML, du Javascript et des Feuilles de style pour dynamiser facilement votre site.">
   <META NAME="KeyWords" CONTENT="scripts,dhtml,DHTML,dynamic HTML,javacript,javascript1.2,CSS,CSS1,CSS2,feuilles de style,stylesheets,demos,exemples,trucs et astuces,tutorial,html,free,gratuit,cup paste,copier coller">
   <META HTTP-EQUIV="Content-language" CONTENT="fr">
   <META NAME="Copyright" CONTENT="Une bonne référence vaut mieux qu'un mauvais copyright ©">
   <META HTTP-EQUIV="Reply-to" CONTENT="Vanlancker.Luc@ccim.be">
   <META NAME="GENERATOR" CONTENT="Mozilla/3.0Gold (Win95; U) [Netscape]">
<SCRIPT>
<!--
function highlight(x){
document.form.elements[x].focus()
document.form.elements[x].select()
}
//--> 
</SCRIPT>
<style>
<!--
.popper
{
position : absolute;
visibility : hidden;
}
//-->
</style>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000080" VLINK="#551A8B" ALINK="#FF0000">
<DIV ID="topdeck" CLASS="popper">&nbsp;</DIV>
<SCRIPT>
// By Mike McGrath http://website.lineone.net/~mike_mcgrath/
var nav = (document.layers); 
var iex = (document.all);
var skn = (nav) ? document.topdeck : topdeck.style;
if (nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
 
function pop(msg,bak) {
var content ="<TABLE WIDTH=130 BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=#000080><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><CENTER><FONT COLOR=#FFFFFF SIZE=2><B>Infobulle</B></FONT></CENTER></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="+bak+"><TR><TD><FONT COLOR=#000000 SIZE=2><CENTER>"+msg+"</CENTER></FONT></TD></TR></TABLE></TD></TR></TABLE>";
if (nav) { 
skn.document.write(content); 
skn.document.close();
skn.visibility = "visible";
}
else if (iex) 
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";  
}
}
 
function get_mouse(e) 
{
var x = (nav) ? e.pageX : event.x+document.body.scrollLeft; 
var y = (nav) ? e.pageY : event.y+document.body.scrollTop;
skn.left = x - 60;
skn.top  = y-100;
}
 
function kill() 
{
skn.visibility = "hidden";
}
</SCRIPT>
 
<TABLE WIDTH="100%" >
<TR>
<TD WIDTH="40%" BGCOLOR="#FFFF00"><B>&nbsp;Une autre infobulle.<FONT COLOR="#FF0000">
IE4+ et NS4</FONT></B></TD>
 
<TD>
<DIV ALIGN=right><P><A HREF="tbinfo.htm"><IMG SRC="BACK.gif" BORDER=0 HEIGHT=11 WIDTH=23></A></P></DIV>
</TD>
</TR>
</TABLE>
 
<P><FORM name="form">Une autre infobulle pas trop difficile &agrave; mettre
en place et &agrave; configurer.</P>
 
<P><B><FONT COLOR="#000080">D&eacute;mo</FONT></B> : Survolez &quot;Scripts
Dhtml&quot;.</P>
<ul><a href="#" onmouseover="pop('Une compilation des meilleurs scripts du World Wide Web.','lightyellow')"; onmouseout="kill()">
 
Scripts Dhtml</a></UL>
 
 
 
<P>On peut modifier :</P>
 
<UL>
<UL>
<LI>la largeur de l'infobulle.<BR>
var content =&quot;&lt;TABLE WIDTH=<B>130</B> ...</LI>
 
<LI>la couleur d'arri&egrave;re-plan de la case de l'infobulle.<BR>
var content =&quot;&lt;TABLE WIDTH=130 ... <B>BGCOLOR=#000080</B>&gt;</LI>
 
<LI>le texte et la couleur de celle-ci.<BR>
&lt;<B>FONT COLOR=#FFFFFF</B> SIZE=2&gt;&lt;B&gt;<B>Infobulle</B>&lt;/B&gt;&lt;/FONT&gt;</LI>
 
<LI>le tout doit rester sur une seule ligne !</LI>
</UL>
</UL>
 
<P><I>Etape</I> 3 :<BR>
Ajouter l&agrave; o&ugrave; vous le souhaitez.</P>
 
 
<P>Vous pouvez modifier :</P>
 
<UL>
<UL>
<LI>le texte de l'infobulle.<BR>
&lt;a href=&quot;#&quot; onmouseover=&quot;pop('<B>Votre texte ici !</B>','lightyellow')&quot;;
onmouseout=&quot;kill()&quot;&gt;lien&lt;/a&gt;</LI>
 
<LI>la couleur d'arri&egrave;re-plan de l'infobulle.<BR>
&lt;a href=&quot;#&quot; onmouseover=&quot;pop('Votre texte ici !','<B>lightyellow</B>')&quot;;
onmouseout=&quot;kill()&quot;&gt;lien&lt;/a&gt;<BR>
<BR>
</LI>
</UL>
</UL>
 
<P><BR>
</P>
 
<P></FORM></P>
 
</BODY>
</HTML>

11/10/2005, 21h09
DJPi

Désolé, je n'ai pu répondre plus tot ....
Pour l'info bulle, ca ne correspond pas vraiment a ce que je recherche ...
Sinon, j'ai essayé de modifier un script de menu, mais dès que je change quelque chose, ca bug ... :?

Essaie ceci :

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
<script>
function showBlock(idName){
         if(document.getElementById) {//NN6,Mozilla,IE5?
            document.getElementById(idName).style.display = "block";;
         }
         else if(document.all) {      //IE4?
            document.all(idName).style.display = "block";;
         }
         else if(document.layers) {   //NN4?
            document.layers[idName].display = "block";;
         }
      }
 
      function hideBlock(idName){
         if(document.getElementById) {//NN6,Mozilla,IE5?
            document.getElementById(idName).style.display = "none";;
         }
         else if(document.all) {      //IE4?
            document.all(idName).style.display = "none";;
         }
         else if(document.layers) {   //NN4?
            document.layers[idName].display = "none";;
         }
      } 
 
      var opened_blocks = new Array;
      function switchBlock(id) {
         if (opened_blocks[id]) {
            opened_blocks[id] = false;
            hideBlock(id);
         } else {
            opened_blocks[id] = true;
            showBlock(id);
         }
     }
</script>
<ul>
   <li>Internet</li>
   <li>
      <a href="javascript:switchBlock('legende_sport')">Sports</a>
      <div id="legende_sport" style="display:none;">DESCRIPTION DE SPORT</div>
   </li>
   <li>Cuisine</li>
</ul>

12/10/2005, 17h15
DJPi

Merci beaucoup !!
C'est exactement ce que je recherchais, a un détail près (raaa, je suis chiant :lol: )

Est il possible que si l'on clique sur Sports après avoir cliquez sur Cuisine, la description de Cuisine disparaisse ?

Merci beaucoup en tout cas :)
12/10/2005, 17h26
Mr N.

Oui c'est possible.

Ca te va comme réponse ? :lol:
Je peux pas me pencher dessus, je suis un poil à la bourre...
12/10/2005, 19h05
DJPi

Pas grave, merci quand meme ;) :D