Menu qui passe sur une image

**looping2b2a** · 09/11/2007, 20h29

bonjour a tous.

j'ai une question, j'ai réussie a intégrer le mootools, mais j'aimerai que mon menu fait avec mootools passe par dessus de mon image.

pouvez vous m'aider?

merci d'avance

j'ai mis la page sur le net

http://www.neoloop.info/test/code.html

Code.html

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
 
<html>
 
<head>
 
<script src="mootools.js" type="text/javascript">
</script>
<script type="text/javascript">
</script>
 
 
 
 
<link href="code.css" rel="stylesheet" type="text/css">
<link href="file:///W|/var/www/pixelpost_v1.6.0/templates/delicious_v1_1/A teste/Fx.Slide/code.css" rel="stylesheet" type="text/css" />
<h3 class="section">Fx.Slide Vertical</h3>
<a id="slideout" href="#">slideout</a>
<a id="slidein" href="#">slidein</a>
<a id="toggle" href="#">toggle</a>
<a id="hide" href="#">hide</a>
<div style="margin: 20px; overflow: hidden;">
<div id="test" style="margin: 0px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
<h3 class="section">Fx.Slide Horizontal</h3>
<a id="slideout2" href="#">slideout</a>
<a id="slidein2" href="#">slidein</a>
<a id="toggle2" href="#">toggle</a>
<a id="hide2" href="#">hide</a>
<div style="margin: 20px; overflow: hidden;">
<div id="test2" style="margin: 0px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
  </div>
  </div>
  <span class="clr"/>      
  </div>
  </div>
 
 
  <script type="text/javascript">
//-vertical
 
var mySlide = new Fx.Slide('test');
 
$('slidein').addEvent('click', function(e){
	e = new Event(e);
	mySlide.slideIn();
	e.stop();
});
 
$('slideout').addEvent('click', function(e){
	e = new Event(e);
	mySlide.slideOut();
	e.stop();
});
 
$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide.toggle();
	e.stop();
});
 
$('hide').addEvent('click', function(e){
	e = new Event(e);
	mySlide.hide();
	e.stop();
});
 
 
//--horizontal
 
var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
 
$('slidein2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.slideIn();
	e.stop();
});
 
$('slideout2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.slideOut();
	e.stop();
});
 
$('toggle2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});
  </script>
</p>
 
 
 
 
<style type="text/css">
			.imageflottante
			{
				float:right;
			}		
		</style>
 
<p><img src="000015.JPG" class="imageflottante" alt="Image flottante" /></p>
</body>
</html>

Code.css

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
 
#test {
float:left;
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
 
 
}
 
#test2 {
float:left;
	background: #222;
	color: #fff;
	padding: 5px;
	margin: 10px;
	border: 10px solid pink;
 
 
}

**Bisûnûrs** · 10/11/2007, 00h46

Mets tes menus en position absolue.

Menu qui passe sur une image

CSS

Discussions similaires

Partager

Partager