5568 sujets

Sémantique web et HTML

[resolu]Definir une zone cliquable

bonjour, j'ai un souci, je souhaiterais changer d'image juste en cliquant sur celle qui est affichée, pour l'instant il suffit que je clique n'importe ou et l'image change.
comment definir la zone cliquable sur les images
merci pour vos explications et voici mon code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN">
<head>
<title>slider simple</title>
 <style type="text/css">
       background: url(image/bleuciel.png);
 </style>

<img src="image/lower.jpg" id="the_image" style="width:500px;height:300px;"/>
<script>

var number=1;
function slideshow()
{
if(number==1){picture="image/door.jpg";}
if(number==2){picture="image/windb.jpg";}
if(number==3){picture="image/winda.jpg";}
if(number==4){picture="image/lower.jpg";}

link=document.getElementById("the_image");
link.setAttribute("src",picture);

if(number<=4){number=number+1;} 
if(number>4){number=1;} 
onclick="slideshow()";

}
</script>
</head>

<body 

onclick="slideshow()"; 

</body>
</html>

Modifié par lazhar (26 Mar 2013 - 09:50)
j'avais vu <map> je ne trouve pas la bonne utilisation, merci pour ta reponse je vais farfouiller dans les liens que tu m'as donné
Si j'ai bien compris ton problème, tu souhaite modifier l'image lors du clic sur la zone plutôt que d'ouvrir un nouveau lien, c'est bien ça?
bonjour, en faite je souhaiterais que ce soit que les images qui soient zone cliquable pour que l'image change

merci
Modifié par lazhar (22 Mar 2013 - 10:18)
Salut,

je n'avais pas bien regarder ton code...
Oublie la balise <map> dans ton cas.

Dans un premier temps, il y a déjà plusieurs problème de syntaxe dans ton code HTML.
- l'image ne doit pas être dans le <header> mais dans le <body>
- La balise ouvrante <body> n'est pas correctement fermée.

Concernant le comportement au clic, il faut que tu appliques la ligne 
onclick="slideshow()"
à la balise qui t'intéresse, en l’occurrence <img> et non pas <body>.

Pour mieux comprendre les différentes façons de gérer les évènements, tu peux regarder par exemple ce tutoriel.
Sujet clos
Aller à