Découper une
Image en zones sensibles ..et détecter le survol de la Souris :
Testez ...! Faites
glisser la souris sur les Pays ...
( France,Angleterrre,Belgique et Corse..ajoutez-en
si vous le souhaitez !!)
<html>
<body>
<script
language="javaScript"><!--
function
affiche(titre,mes)
{
self.status=titre;
document.visite.zone.value=mes;
}
//-->
</script>
<form
name="visite">
<div
align=center>
<input
type=text name="zone" size=40>
<br>
<map
name="carte">
<area
shape="rect"
coords="372,224,433,327"
href="#" onMouseOver="affiche('Corse','Île
de Beauté..!!');return true;"
onMouseOut="affiche('','');return
true;">
<area
shape="poly"
coords="222,17,289,68,302,38,277,7,239,7,222,17"
href="#" onMouseOver="affiche('BELGIQUE','..et
ses Chocolats..!');return true"
onMouseOut="affiche('','');return
true">
<area
shape="poly"
coords="96,1,68,8,48,32,74,31,98,23,173,20,183,10,144,0,96,1"
href="#" onMouseOver="affiche('Angleterre','..et
son Flegme..!');return true"
onMouseOut="affiche('','');return
true">
<area
shape="poly"
coords="216,29,170,72,129,81,128,101,93,102,58,99,56,
117,107,150,129,205,113,285,221,321,255,279,312,297,335,
275,309,159,343,91,212,24,216,29"
href="#" onMouseOver="affiche('FRANCE','..ses
Vins..ses Fromages..!');return true"
onMouseOut="affiche('','');return
true">
</map>
<img
src="carte.gif" usemap="#carte"
>
</div>
</body>
</html>
L'Image est virtuellement découpée
en zones sensibles au passage de la souris.
Chaque Zone peut être de forme : rectangulaire
( shape="rect" ) ou polygonale ( shape="poly" ) ou
même circulaire ( shape = "circle" ).
Toutes les coordonnées seront définies
en Pixels.