Visualizza post
1
Joomla! 1.6/1.7/2.5 / [RISOLTO] Per esperti: cartina sensibile del trentino
« il: 25 Gen 2013, 20:33:48 »
ciao a tutti sto provando da un po di giorni a creare una cartina sensibile del trentino divisa in 4 zone..passando sopra ogniuna deve apparire un altra immagine per evidenziare la zona e deve esserci un link per ogni zona..il problema è che joomla o mi vede il comando href per il link o il comando over per il cambio immagine...vi posto il codice spero che qualcuno possa aiutarmi su dove sbaglio, grazie!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>image map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function placeImage(planet) {
var red = document.getElementById('red');
var blue = document.getElementById('blue');
var green = document.getElementById('green');
var yellow = document.getElementById('yellow');
switch (planet) {
case 'mercur':
red.style.top = '0px';
red.style.left = '-8px';
red.style.display = 'block';
break;
case 'venus':
blue.style.top = '0px';
blue.style.left = '100px';
blue.style.display = 'block';
break;
case 'marte':
green.style.top = '100px';
green.style.left = '0px';
green.style.display = 'block';
break;
case 'terra':
yellow.style.top = '100px';
yellow.style.left = '100px';
yellow.style.display = 'block';
break;
default:
red.style.display = 'none';
blue.style.display = 'none';
green.style.display = 'none';
yellow.style.display = 'none';
}
}
</script>
<style type="text/css">
#container {position:relative;}
#red {display:none;position:absolute;top:0;left:0;}
#blue {display:none;position:absolute;top:0;left:0;}
#green {display:none;position:absolute;top:0;left:0;}
#yellow {display:none;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="container">
<img src="images/Trentino.png" width="250" height="240" alt="Planets" usemap="#planetmap">
<img id="red" src="images/1.png" width="163" height="100" alt="red" onmouseout="placeImage()">
<img id="blue" src="images/2.png" width="100" height="100" alt="blue" onmouseout="placeImage()">
<img id="green" src="images/3.png" width="100" height="100" alt="green" onmouseout="placeImage()">
<img id="yellow" src="images/4.png" width="100" height="100" alt="yellow" onmouseout="placeImage()">
<map name="planetmap">
<area shape ="circle" coords ="100, 85,100" onmouseover="placeImage('mercur')" href ="http://www.google.it" alt="Mercury">
<area shape ="circle" coords ="100,1500,100" onmouseover="placeImage('venus')" href ="venus.htm" target ="_blank" alt="Venus">
<area shape ="circle" coords ="150,250,50" onmouseover="placeImage('marte')" href ="marte.htm" target ="_blank" alt="marte">
<area shape ="circle" coords ="250,250,50" onmouseover="placeImage('terra')" href ="terra.htm" target ="_blank" alt="terra">
</map>
<>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>image map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function placeImage(planet) {
var red = document.getElementById('red');
var blue = document.getElementById('blue');
var green = document.getElementById('green');
var yellow = document.getElementById('yellow');
switch (planet) {
case 'mercur':
red.style.top = '0px';
red.style.left = '-8px';
red.style.display = 'block';
break;
case 'venus':
blue.style.top = '0px';
blue.style.left = '100px';
blue.style.display = 'block';
break;
case 'marte':
green.style.top = '100px';
green.style.left = '0px';
green.style.display = 'block';
break;
case 'terra':
yellow.style.top = '100px';
yellow.style.left = '100px';
yellow.style.display = 'block';
break;
default:
red.style.display = 'none';
blue.style.display = 'none';
green.style.display = 'none';
yellow.style.display = 'none';
}
}
</script>
<style type="text/css">
#container {position:relative;}
#red {display:none;position:absolute;top:0;left:0;}
#blue {display:none;position:absolute;top:0;left:0;}
#green {display:none;position:absolute;top:0;left:0;}
#yellow {display:none;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="container">
<img src="images/Trentino.png" width="250" height="240" alt="Planets" usemap="#planetmap">
<img id="red" src="images/1.png" width="163" height="100" alt="red" onmouseout="placeImage()">
<img id="blue" src="images/2.png" width="100" height="100" alt="blue" onmouseout="placeImage()">
<img id="green" src="images/3.png" width="100" height="100" alt="green" onmouseout="placeImage()">
<img id="yellow" src="images/4.png" width="100" height="100" alt="yellow" onmouseout="placeImage()">
<map name="planetmap">
<area shape ="circle" coords ="100, 85,100" onmouseover="placeImage('mercur')" href ="http://www.google.it" alt="Mercury">
<area shape ="circle" coords ="100,1500,100" onmouseover="placeImage('venus')" href ="venus.htm" target ="_blank" alt="Venus">
<area shape ="circle" coords ="150,250,50" onmouseover="placeImage('marte')" href ="marte.htm" target ="_blank" alt="marte">
<area shape ="circle" coords ="250,250,50" onmouseover="placeImage('terra')" href ="terra.htm" target ="_blank" alt="terra">
</map>
<>
</body>
</html>
