Exemple hard d'interactivité
Lorsque le pointeur de la souris se promène sur la carte, des informations s'affichent dans un tableau. Cet exemple est un peu plus "hard" que le précedent.
<HTML>
<HEAD>
<TITLE>La carte de l'Europe</TITLE>
<script language="JavaScript">
efface = new Array("", "", "", "", "", "")
Irlande = new Array("Irlande", "3 500 500", "84 000",
"Republique", "Dublin", "livre irlandaise")
Angleterre= new Array("Grande Bretagne", "57 500 000", "243 500",
"Monarch. parlem.", "Londres", "livre sterling")
France = new Array("France", "58 000 000", "549 000",
"Republique", "Paris", "franc francais")
Belgique = new Array("Belgique", "9 980 000", "30 500",
"Monarch. constit.", "Bruxelles", "franc belge")
Espagne = new Array("Espagne", "39 000 000", "497 500",
"Monarch. parlem.", "Madrid", "peseta")
Italie = new Array("Italie", "57 700 000", "301 000",
"Republique", "Rome", "lire")
Allemagne= new Array("Allemagne", "79 500 000", "357 000",
"Republique fed.", "Berlin", "deutchsmark")
Autriche = new Array("Autriche", "7 700 000", "84 000",
"Republique fed.", "Vienne", "schilling")
Suisse = new Array("Suisse", "6 800 000", "41 293",
"Republique", "Berne", "franc suisse")
Pologne = new Array("Pologne", "38 200 000", "313 000",
"Republique", "Varsovie", "zloty")
Norvege = new Array("Norvege", "4 300 000", "325 000",
"Monarch. constit.", "Oslo", "couronne")
Suede = new Array("Suede", "8 600 000", "450 000",
"Monarch. parlem.", "Stockholm", "couronne sued.")
//-----------------------------------------------------------
function affiche(pays)
{ with (document.carte)
{ nom.value = pays[0]
population.value = pays[1]
superficie.value = pays[2]
gouvernement.value = pays[3]
capitale.value = pays[4]
monnaie.value = pays[5]
}
}
</script>
</HEAD>
<BODY>
<MAP NAME="Europe">
<AREA COORDS="14,139,39,137,44,148,27,169,1,169,14,139"
SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Irlande)" onMouseOut="affiche(efface)">
<AREA COORDS="46,106,46,136,47,144,54,162,43,162,
31,175,44,185,22,191,67,199,76,195,80,178,65,134,75,122,64,
118,71,108,
61,106" SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Angleterre)" onMouseOut="affiche(efface)">
<AREA COORDS="23,213,48,206,79,202,95,220,115,230,96,254,
102,260,99,281,104,285,88,293,77,284,65,293,30,272,42,245,
23,213" SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(France)" onMouseOut="affiche(efface)">
<AREA COORDS="79,202,93,198,104,203,104,214,95,220,79,202"
SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Belgique)" onMouseOut="affiche(efface)">
<AREA COORDS="65,293,30,272,0,260,0,342,20,338,31,327,
29,318,65,293" SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Espagne)" onMouseOut="affiche(efface)">
<AREA COORDS="104,203,104,222,105,230,105,245,148,250,
156,239,147,220,165,212,167,182,133,166,93,198,148,250"
SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Allemagne)" onMouseOut="affiche(efface)">
<AREA COORDS="105,285,100,267,131,255,155,265,144,276,
152,300,189,337,165,358,163,354,165,338,124,298,112,282,
105,285" SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Italie)" onMouseOut="affiche(efface)">
<AREA COORDS="189,173,166,182,166,212,189,225"
SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Pologne)" onMouseOut="affiche(efface)">
<AREA COORDS="124,247,100,267,131,255,129,247,101,268,99,255"
SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Suisse)" onMouseOut="affiche(efface)">
<AREA COORDS="189,15,177,27,188,29,131,85,121,126,132,132,
161,109,166,73,189,38,189,15"
SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Norvege)" onMouseOut="affiche(efface)">
<AREA COORDS="148,250,156,239,176,236,179,247,164,262,
153,262,131,255,125,248,148,250"
SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Autriche)" onMouseOut="affiche(efface)">
<AREA COORDS="189,15,189,38,166,73,161,109,152,126,158,168
184,141,189,127,189,38" SHAPE="poly" HREF="javascript:void(0)"
onMouseOver="affiche(Suede)" onMouseOut="affiche(efface)">
</MAP>
<TABLE BORDER>
<FORM NAME="carte">
<CAPTION><B>QUELQUES ETATS D'EUROPE</B></CAPTION>
<TR>
<TD><IMG SRC="europe.gif" USEMAP="#Europe"></TD>
<TD><PRE>
Pays : <INPUT TYPE="text" SIZE="15" NAME="nom" VALUE="">
<P>
Population : <INPUT TYPE="text" SIZE="15" NAME="population" VALUE=""> hab.
<P>
Superficie : <INPUT TYPE="text" SIZE="15" NAME="superficie" VALUE=""> km<SUP>2</SUP>
<P>
Gouvernement : <INPUT TYPE="text" SIZE="15" NAME="gouvernement" VALUE="">
<P>
Capitale : <INPUT TYPE="text" SIZE="15" NAME="capitale" VALUE="">
<P>
Monnaie : <INPUT TYPE="text" SIZE="15" NAME="monnaie" VALUE=""></PRE>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>