Menu images animées et liens

**alkaris** · 30/05/2011, 16h33

Bonjour.

En suivant un tuto , j'ai fait un menu avec des images animées.
Seulement je ne sais pas comment faire pour que ces images soient cliquables et amenent vers certaines pages du site.

Merci par avance de vos conseils.

Ci-dessous le 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
</head>
<script src="jquery-1.6.js"></script>
<script>
$(document).ready(function(){
	$("ul").hover(function(){
		/* AGRANDISSEMENT IMAGE */
 
		$("li",this).stop().animate({
			width:"300px",
	},150 );
 
	/* TEXTE EN MOUVEMENT */
	$(".text", this).stop().animate({
		bottom:"100px",
	},150);
	},
 
 
	function(){
 
		/* REPOSITIONNEMENT IMAGE */
		$("li",this).stop().animate({
			width:"150px",
	},150 );
 
 
	/* REPOSITIONNEMENT TEXTE */
 
	$(".text", this).stop().animate({
		bottom:"-350px",
	},150);
 
});
});
</script>
<style>
.ADMINISTRATIF{background:url(images/ADMINISTRATIF.png)<a href="http://www.sp-creation.net">http://www.sp-creation.net</a>;height:400px;width:300px;float:left;position: relative;overflow:hidden;
}
.COMMERCIAL{background:url(images/commercial2.png);height:400px;width:300px;float:left;position:relative;overflow:hidden;}
.TECHNIQUE{background: url(images/TECHNIQUE.png);height:200px;width:150px;float:left;position:relative;overflow:hidden;}
 
.text{position:absolute;bottom:-20px;left:150px;color:#000;font-family:"Arial Black", Gadget, sans-serif;font-weight:bold;font-size:24px;}
ul{list-style:none;}
 
 
</style>
</head>
 
<body>
<ul> <li class="ADMINISTRATIF">
<a href="www.sp-creation.net"></a> 
<div class="text">ADMINISTRATIF</div>
</li>
</ul>
 
<ul> <li class="COMMERCIAL"> 
<div class="text">COMMERCIAL</div>
</li>
</ul>
 
<ul> <li class="TECHNIQUE"> 
<div class="text">TECHNIQUE</div>
</li>
</ul>
 
 
<body>
</body>
</html>

**gwinyam** · 01/06/2011, 17h58

Pour info, t'as suivi quel tuto?

T'as essayé de rajouter un évènement onClick sur tes classes?

Menu images animées et liens

jQuery

Vue hybride

Discussions similaires

Partager

Partager