Mouvement d'un menu (floating)
bonjours,
je suis en train de faire ce site internet
http://dovelakeglobal.com/test.html
cependant le mouvement du menu que j'ai crée ne fait pas ce que je veut faire.
ce que je veut faire est.
quand je descends, le menu sur la page, soit, il suit l'image, puis des que l'image n'est plus afficher qu'il y est un espace de 10px
je met des image explicatif.
page d'ouverture
http://dovelakeglobal.com/1.JPG
et les images quand on descend la page
http://dovelakeglobal.com/2.JPG
et le bas de page
http://dovelakeglobal.com/3.JPG
comment je peut faire cela, cela fait 2 jour que je bat sur ce problème..
voici le code
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
|
<div id="sidebar1">
<div id="divTopLeft" style="position:absolute;">
<ul id="navmenu">
<li><a href="index.html"> HOME PAGE</a></li>
<li><a href="#"> Children's Page</a>
<ul>
<li><a href="#">Children Of Dove Lake</a></li>
<li><a href="#">Pen Pals</a></li>
<li><a href="#">Smiles & Fun Page</a></li>
</ul>
</li>
<li><a href="#"> Housing</a></li>
<li><a href="#"> Education</a>
<ul>
<li><a href="#">School</a></li>
<li><a href="#">Vocational Training</a></li>
<li><a href="#">Recreation</a></li>
</ul>
</li>
<li><a href="#"> Spiritual Center</a>
<ul>
<li><a href="#">Culture</a></li>
</ul>
</li>
<li><a href="#"> Clinic</a></li>
<li><a href="#"> Farm</a>
<ul>
<li><a href="#">Agriculture</a></li>
<li><a href="#">Aquaculture</a></li>
<li><a href="#">Processing</a></li>
</ul>
</li>
<li><a href="#"> Business Center</a></li>
<li><a href="#"> Hotel</a>
<ul>
<li><a href="#">Conventions / Meetings</a></li>
<li><a href="#">Holidays</a></li>
<li><a href="#">SPA / Wellness Center</a></li>
</ul>
</li>
<li><a href="#"> Energy</a>
<ul>
<li><a href="#">Wind</a></li>
<li><a href="#">Solar</a></li>
<li><a href="#">Alternative Energy Research Lab</a></li>
</ul>
</li>
<li><a href="#"> Health / Nutrition</a></li>
<li><a href="#"> Amenities</a>
<ul>
<li><a href="#">x-1</a></li>
<li><a href="#">x-2</a></li>
<li><a href="#">x-3</a></li>
</ul>
</li>
<li><a href="#"> Employment / Volunteers</a></li>
<li><a href="#"> Events</a>
<ul>
<li><a href="#">Holidays</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</li>
<li><a href="#"> Gift Store</a></li>
<li><a href="#"> Dream Page</a></li>
<li><a href="SendMail.html"> Contact Info</a></li>
<li><a href="#"> Recommended Sites</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopLeft", 0,0).floatIt();
</script>
<!-- ********************************************************* -->
</div> |
cela ne fonctionne toujours pas
re-bonjours
je vient de faire la modifications que vous m'avez donné.
cependant cela ne fonctionne toujours pas, sauf si j'ai mal comprit, car je jacascript, n'est vraiment pas ma tasse de thé.
voici ce que j'ai fait suite a votre aide
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
|
<script type="text/javascript">
if(document.body.scrollTop>=document.getElementById('divTopLeft').offsetTop-10)
{
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;
el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;
this.cy += (pY + this.sy - this.cy)/800;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopLeft", 0,0).floatIt();
}
</script>
<!-- ********************************************************* --> |
