Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : Michele 91 25 Jan 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 (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 (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> :o
-
le coordinate sono corrette solo quelle della prima immagine perchè sto ancora testando
-
Mi sa che manca il </DIV> di chiusura.. ;D
-
solo errore di copia incolla ;D
-
mi puoi aiutare?ci sto impazzendo..ho provato a mettere l href..ecc ovunque ma non lo prende assieme all over :o
-
RISOLTO..basta mettere onclick prima di href e metterlo nell immagine e non nell area shape :P