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?

01/06/2011, 17h58	#2
gwinyam Membre Expert Mathieu ROBIN Développeur Web Inscription : mai 2006 Messages : 1 116 Détails du profil Informations personnelles : Nom : Mathieu ROBIN Âge : 25 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : mai 2006 Messages : 1 116 Points : 2 142 Points : 2 142	Pour info, t'as suivi quel tuto? T'as essayé de rajouter un évènement onClick sur tes classes? __________________ Mon blog techno et son billet hebdomadaire sur l'actualité jQuery. Et mon blog cuisine pour une personne. Le bouton ne masse pas les pieds, mais ça aide la communauté.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email