<html>
<head>
</head>
<body>
<img src="italia.jpg" usemap="#mappa">
<map name="mappa">
<area shape="poly" coords="192, 202, 196, 194, 201, 193, 206, 194, 213, 190, 202, 178, 196, 171, 191, 161, 181, 161, 178, 163, 175, 167, 173, 170, 171, 174, 172, 177, 172, 177, 174, 182, 173, 185, 170, 187, 170, 191, 176, 196, 176, 196, 183, 200, 192, 201, 197, 195" onclick="mostra(event,abruzzo)">
<area shape="poly" coords="175, 163, 182, 161, 189, 160, 186, 142, 182, 134, 180, 131, 174, 129, 159, 118, 156, 121, 153, 117, 145, 121, 140, 127, 140, 127, 149, 128, 147, 133, 154, 140, 158, 137, 160, 145, 159, 152, 163, 156, 168, 158, 168, 162, 174, 166, 179, 162, 189, 159" onclick="mostra(event,marche)">
</map>
<div id="menu" style="padding:10px;position:absolute;background:yellow;visibility:hidden" onclick="this.style.visibility='hidden'"></div>
</body>
<script>
var marche="Ancona<br>Pesaro<br>Ascoli Piceno<br>Macerata";
var abruzzo="<a href='http://it.wikipedia.org/wiki/L%27Aquila'>L'Aquila</a><br><a href='http://it.wikipedia.org/wiki/Pescara'>Pescara</a><br><a href='http://it.wikipedia.org/wiki/Chieti'>Chieti</a><br><a href='http://it.wikipedia.org/wiki/Teramo'>Teramo</a>";
function mostra(event,contenuto){
if (event.button==0){
document.getElementById("menu").style.left=event.clientX+10;
document.getElementById("menu").style.top=event.clientY+10;
document.getElementById("menu").style.visibility="visible";
document.getElementById("menu").innerHTML=contenuto;
}
else{
document.getElementById("menu").style.visibility="hidden";
}
}
</script>
</html>
Simpatico!
Ecco la pagina
Nessun commento:
Posta un commento