HTML Zoom sur image
sahaso
-
sahaso -
sahaso -
Salut ! J'ai un pb : j'ai une carte, mais elle est trop petite. Alors je l'ai divisée en 4 zones. Je souhaites que lorsque je cliques sur une de ces zones elle ouvre une autre page avec l'image agrandie. Pour cela j'ai découpé l'image en 4 zones. Seulement, je souhaiterais ne faire qu'une page, et que l'image qui s'affichera se fera selon la zone que j'ai cliqué. Je ne vois pas comment transmettre l'information d'une page à l'autre...
Merci.
Merci.
1 réponse
-
Salut Sahaso,
Voici un ex :
Je considère que la carte s'appelle carte.jpg et fait 200x100
que je coupe en 2 zones pour simplifier.
Chaque zone s'appelle zone1.jpg et zone2.jpg
La page contient ma carte : carte.htm
<html>
<head>
</head>
<body>
<map name="zone">
<area href="zone.htm?nr=1" shape="rect" coords="0,0,99,99" alt="Zone 1" target="_new">
<area href="zone.htm?nr=2" shape="rect" coords="100,0,199,99" alt="Zone 2" target="_new">
</map>
<img border=0 src="carte.jpg" usemap="#zone">
</body>
</html>
Je transmet le nr de la zone comme paramèter dans l'URL mais tu pourrais tout aussi bien passer le nom de l'image. :;-)
J'ouvre à chaque fois une nouvelle fenêtre mais ce n'est pas obligatoire.
Ce code HTML étant des + classiques passons à la suite.
La page zone.htm :
<html>
<head>
<script language="JavaScript">
<!--
// Recherche du paramètre passé dans l'url portant le nom param_id
function getUrlParam(param_id)
{
// Récupére les paramètres passés dans l'url dans un tableau
var paramArray=window.location.search.substr(1).split("&")
var param=null
for (var i=0; i < paramArray.length; i++)
{
if (paramArray[i].indexOf(param_id)==0)
{
var j=paramArray[i].indexOf("=")
if (j!=-1) param=paramArray[i].substr(j+1)
break
}
}
return param
}
var zone=getUrlParam("nr")
function load()
{
window.document.zone.src="zone"+zone+".jpg";
}
// -->
</script>
</head>
<body onload="load()">
<img border=0 src="" name="zone">
</body>
</html>
Je récupère d'abord le nr de la zone en recherchant la variable "nr" transmise comme paramètre et je stocke son contenu dans la variable JS zone.
Ensuite grâce à l'événement onload() je charge la bonne image.
Evidemment dans mon ex toutes les images doivent porter le même nom suivi du nr de zone.
Voilà ;:-)
@+
Philippe
[[ The Truth is Out There ]]
