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>