Afficher en deux temps ...

**DJPi** · 09/10/2005, 18h27

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 :

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

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

**Mr N.** · 10/10/2005, 09h42

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

**Tdeny** · 10/10/2005, 12h39

Un petite ou une grosse description ?
Pour une petite, tu as l'info-bulle.
Une pas mal 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
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>

**DJPi** · 11/10/2005, 21h09

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

**Mr N.** · 12/10/2005, 00h13

Essaie ceci :

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