[DW8] Quels sont les comportements à utiliser ?

**ChristelleB** · 09/04/2008, 21h13

Bonjour,

J'étudie les calques sur le site http://www.cyberformateur.com/suppor...eamweaver.htm#

J'ai fait les exercices de cette page grâce au démos. Maintenant, j'essaye de réaliser le menu simple (le lien est situé en haut), problème je ne trouve pas la bonne marche à suivre. J'ai commencé par créer 7 calques (menu, chapitre 1, chapitre 2, chapitre 3, rubrique 1, rubrique 2, rubrique 3) ; j'ai rendu invisible les calques rubrique 1, rubrique 2, rubrique 3 grâce à l'icône oeil fermé... J'ai réussi à faire apparaître le calque rubrique 1 en suivant l'exercice Comportement Afficher / masquer les calques. Et là, j'ai fait plusieurs essais infructueux... Je ne sais plus que fare... Quels sont les comportements à utiliser ? Merci de m'apporter votre aide,

ChristelleB

**ChristelleB** · 10/04/2008, 18h20

Re-bonjour,

Vous n'auriez vraiment pas une petite idée des comportements à adopter pour faire apparaître la 2e colonne en faisant disparaître la première ? Utilise-t-on onMouseOver et onMouseOut ? Ou peut-être un autre comportement... mais lequel ?

Merci de ne pas m'abandonner, j'ai besoin de votre aide !

ChristelleB

**Jumano** · 10/04/2008, 20h20

Bonjour,
Un bout de code permettrait de voir l'erreur peut être ?
Y-a-t-il un message d'erreur ?

**ideal23** · 11/04/2008, 10h12

bonjour
regarde google:http://www.cyberformateur.com/suppor...-calques-dream
weaver.htm

http://www.netsources-fr.com/index1.php3?page=cdream6

**ChristelleB** · 11/04/2008, 12h00

Envoyé par jumano

Bonjour,
Un bout de code permettrait de voir l'erreur peut être ?
Y-a-t-il un message d'erreur ?

Bonjour ! Merci pour votre message.

Voici le code créé par Dreamweaver 8, un fois que toutes mes manipulations ont été effectuées. Peut-être me suis-je trompée de coportements (?). Auriez-vous une idée sur la question ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">

</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'

v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body onmouseover="MM_showHideLayers('rubrique1','','show')">
<div id="chapitre3"><a href="#" onMouseOver="MM_showHideLayers('rubrique2','','hide');MM_showHideLayers('rubrique3','','show')">Chapitre 3 </a></div>
<div id="chapitre2"><a href="#" onMouseOver="MM_showHideLayers('rubrique1','','hide');MM_showHideLayers('rubrique2','','show')">Chapitre 2</a> </div>
<div id="chapitre1"><a href="#" onMouseOver="MM_showHideLayers('rubrique1','','show')">Chapitre 1</a> </div>
<div id="menu">Menu</div>
<div id="rubrique1" onClick="MM_showHideLayers('rubrique1','','hide')">Rubrique 1<br>
Rubrique 2 <br>
Rubrique 3 <br>
Rubrique 4<br>
</div>
<div id="rubrique2">Rubrique 1<br>
Rubrique 2 <br>
Rubrique 3 <br>
Rubrique 4<br>
</div>
<div id="rubrique3">Rubrique 1<br>
Rubrique 2 <br>
Rubrique 3 <br>
Rubrique 4<br>
</div>
</body>
</html>

**Jumano** · 11/04/2008, 15h15

Bonjour,
Première chose lorsque tu postes du code, mets le entre les balises [CODE] (le bouton # au dessus).

Ton problème vient du fait que sur l'évènement "onMouseOver" tu indiques que ta "div" doit être "hide" et "show" donc çà ne peux pas marcher.
Tu dois donc faire un "show" sur le "onMouseOver" et un "hide" sur le "onMouseOut".
Ce qui te donne :

Code :

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

1
2
3
4
<div id="chapitre3"><a href="#" onMouseOver="MM_showHideLayers('rubrique3','','show')" onMouseOut="MM_showHideLayers('rubrique3','','hide')">Chapitre 3 </a></div>
<div id="chapitre2"><a href="#" onMouseOver="MM_showHideLayers('rubrique2','','show')" onMouseOut="MM_showHideLayers('rubrique2','','hide')">Chapitre 2</a> </div>
<div id="chapitre1"><a href="#" onMouseOver="MM_showHideLayers('rubrique1','','show')" onMouseOut="MM_showHideLayers('rubrique1','','hide')">Chapitre 1</a> </div>

De plus, tu peux retirer le

Code :

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

 "onmouseover="MM_showHideLayers('rubrique1','','show')"

de ta balise <body>

**ChristelleB** · 12/04/2008, 13h54

Envoyé par ideal23

bonjour
regarde google:http://www.cyberformateur.com/suppor...-calques-dream
weaver.htm

http://www.netsources-fr.com/index1.php3?page=cdream6

Merci ideal23 ! Ces liens sont très intéressants, cela pourra me faire découvrir d'autres techniques.

**ChristelleB** · 12/04/2008, 15h27

Bonjour jumano,

C'est vrai, on pourrait utiliser onMouseOut après onMouseOver mais je constate que dans ce cas les comportements de l'exercice - menu simple (simple) de http://www.cyberformateur.com/suppor...eamweaver.htm# ne seraient pas respectés. Donc, j'ai revu le code. Maintenant, il y a un progrès, cela marche au 3/4. A part le calque rubrique 1 qui ne veut pas disparaître lorsqu'on passe sur le calque chapitre 2 ou chapitre 3, tout fonctionne très bien. Alors, comment expliquer cela ? Vou n'auriez pas une idée, par hasard ?

Merci d'avance pour votre aide,
ChristelleB

Voici mon nouveau 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
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
168

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">
<!--
#chapitre3 {
 position:absolute;
 width:200px;
 height:24;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:2;
 left: 780px;
 top: 32px;
 visibility: visible;
}
#chapitre2 {
 position:absolute;
 width:200px;
 height:24;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:3;
 left: 566px;
 top: 32px;
 visibility: visible;
}
#Layer3 {
 position:absolute;
 width:200px;
 height:50px;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:1;
 left: -250px;
 top: 0px;
}
#chapitre1 {
 position:absolute;
 width:200px;
 height:24;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:4;
 left: 336px;
 top: 31px;
 visibility: visible;
}
#menu {
 position:absolute;
 width:200px;
 height:24;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:5;
 left: 114px;
 top: 32px;
 visibility: visible;
}
#Layer1 {
 position:absolute;
 width:200px;
 height:81px;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:6;
 left: 112px;
 top: 65;
}
#rubrique1 {
 position:absolute;
 width:200px;
 height:81px;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:10;
 left: 335px;
 top: 88px;
 visibility: hidden;
}
#rubrique2 {
 position:absolute;
 width:200px;
 height:81px;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:8;
 left: 567px;
 top: 100px;
 visibility: hidden;
}
#rubrique3 {
 position:absolute;
 width:200px;
 height:81px;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:6;
 left: 789px;
 top: 100px;
 visibility: hidden;
}
#Layer2 {
 position:absolute;
 width:691px;
 height:115px;
 layer-background-color:#0000FF;
 border:1px none #000000;
 z-index:11;
 left: 209px;
 top: 140px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body onmouseover="MM_showHideLayers('rubrique1','','show')">
<div id="chapitre3"><a href="#" onMouseOver="MM_showHideLayers('rubrique3','','show');MM_showHideLayers('rubrique2','','hide');MM_showHideLayers('rubrique1','','hide')">Chapitre 3 </a></div>
<div id="chapitre2"><a href="#" onMouseOver="MM_showHideLayers('rubrique1','','hide','rubrique2','','show','rubrique3','','hide');MM_showHideLayers('rubrique2','','show');MM_showHideLayers('rubrique1','','hide')">Chapitre 2</a> </div>
<div id="chapitre1"><a href="#" onMouseOver="MM_showHideLayers('rubrique1','','show');MM_showHideLayers('rubrique2','','hide');MM_showHideLayers('rubrique3','','hide')">Chapitre 1</a> </div>
<div id="menu">Menu</div>
<div id="rubrique1" onClick="MM_showHideLayers('rubrique1','','hide')">Rubrique 1<br>
Rubrique 2 <br>
Rubrique 3 <br>
Rubrique 4<br>
</div>
<div id="rubrique2">Rubrique 1<br>
Rubrique 2 <br>
Rubrique 3 <br>
Rubrique 4<br>
</div>
<div id="rubrique3">Rubrique 1<br>
Rubrique 2 <br>
Rubrique 3 <br>
Rubrique 4<br>
</div>
</body>
</html>

**Jumano** · 12/04/2008, 15h33

Bonjour,
En supprimant la fonction dans la balise <body>
Au lieu de :

Code :

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

1
2
<body onmouseover="MM_showHideLayers('rubrique1','','show')">

mettre :

Code :

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

1
2
<body>

**ChristelleB** · 12/04/2008, 17h51

Parfait ! Merci, ça marche !

On se demande comment Dreamweaver peut créer un code qui ne correspond pas à ce que l'utilisateur demande. Dans ce cas, mieux vaut connaître son htlm sur le bout des doigts pour corriger au fur et à mesure.

Merci encore,
ChristelleB

[DW8] Quels sont les comportements à utiliser ?

Dreamweaver

Discussions similaires

Partager

Partager