11548 sujets

JavaScript, DOM et API Web HTML5

Liens hypertexte dans images

Bonjour.
J'ai suivi un tuto pour creer un menu animé en images avec Jquery , seulement il est expliqué nulle part comment faire pour qu'un clic sur les images amene vers certaines pages du site.

Merci de votre aide.

Ci-dessous le code.

</head>
<script src="jquery-1.6.js"></script>
<script>
$(document).ready(function(){
	$("ul").hover(function(){
		/* AGRANDISSEMENT IMAGE */
		
		$("li",this).stop().animate({
			width:"600px",
	},300 );
	
	/* TEXTE EN MOUVEMENT */
	$(".text", this).stop().animate({
		bottom:"100px",
	},300);
	},
	
	
	function(){
		
		/* REPOSITIONNEMENT IMAGE */
		$("li",this).stop().animate({
			width:"300px",
	},300 );
	
	
	/* REPOSITIONNEMENT TEXTE */
	
	$(".text", this).stop().animate({
		bottom:"-350px",
	},300);
	
});
});
</script>
<style>
.ADMINISTRATIF{background:url(images/ADMINISTRATIF.png);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:400px;width:300px;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">

<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>
Quand je parlais de "références", je voulais dire "liens" sur lequel cliquer pour éviter de perdre son temps à fouiller sur le site "tuto.com".
Bonjour,

Plusieurs solutions possibles :
- sois tu mets un attribut sur chaque li avec le lien vers l'image, et sur un évènement click tu récupères l'attribut et fais un window.location

- sois tu mets un évènement au click de chaque li avec le window.location qui va bien, genre :

$("li.ADMINISTRATIF").click(function() {
window.location.href = "tapage.php";
});


Le plus propre serait d'ajouter une class aux "ul", de mettre la partie commune du css des "li" dans cette class, et de faire l'évènement jquery sur la nouvelle class créée, avec un switch se basant sur la class/id du div contenu dans l'ul pour rediriger vers la page voulue, en gros :


</head>

<script src="jquery-1.6.js"></script>

<script>

$(document).ready(function(){
$("li.imagesa").click(function() {
var subid = $(this).attr('id');
switch(subid)
{
case "administratif":
  window.location.href="administratif.php";
  break;
case "commercial":
  window.location.href="commercial.php";
  break;
case "technique":
  window.location.href="technique.php";
}
});
	$("ul").hover(function(){

		/* AGRANDISSEMENT IMAGE */

		

		$("li",this).stop().animate({

			width:"600px",

	},300 );

	

	/* TEXTE EN MOUVEMENT */

	$(".text", this).stop().animate({

		bottom:"100px",

	},300);

	},

	

	

	function(){

		

		/* REPOSITIONNEMENT IMAGE */

		$("li",this).stop().animate({

			width:"300px",

	},300 );

	

	

	/* REPOSITIONNEMENT TEXTE */

	

	$(".text", this).stop().animate({

		bottom:"-350px",

	},300);

	

});

});

</script>

<style>

.imagesa {
height:400px;width:300px;float:left;position: relative;overflow:hidden;
}

#administratif{background:url(images/ADMINISTRATIF.png);}

#commercial{background:url(images/commercial2.png);}

#technique{background: url(images/TECHNIQUE.png);}

.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="imagesa" id="administratif">



<div class="text">ADMINISTRATIF</div>

</li>

</ul>



<ul> <li class="imagesa" id="commercial"> 

<div class="text">COMMERCIAL</div>

</li>

</ul>



<ul> <li class="imagesa" id="technique"> 

<div class="text">TECHNIQUE</div>

</li>

</ul>





<body>

</body>

</html>


(il peut y avoir des erreurs, j'ai pas testé)
Modifié par Natha (31 May 2011 - 10:39)
Merci pour ton aide.

J'ai tenté avec ce code : 

$("li.ADMINISTRATIF").click(function { 
window.location.href = "tapage.php"; 
});


Mais apparement il y aurait une erreur de syntaxe
Il manque () après le mot function.
J'ai testé, mais ça ne fonctionne pas.

Tu peux faire tout bêtement:

<li class="ADMINISTRATIF">
<div class="text">
<a href="administratif.php">ADMINISTRATIF</a>
</div>
</li>
et restyler tes balises < a href=...

Dommage de ne pas disposer des images Smiley decu
Modifié par lddsoft (31 May 2011 - 10:25)
Sujet clos
Aller à