HTML Zoom sur image

Fermé
sahaso - 22 févr. 2002 à 14:32
 sahaso - 25 févr. 2002 à 09:25
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.
A voir également:

1 réponse

PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
23 févr. 2002 à 16:23
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   ]]
3
Marci beaucoup !
0