Hola otra vez:
Te he preparado un ejemplo sencillo:
http://www.pepemolina.com/imagenes/maparaborrar1.html que es tan solo dividir la página anterior en 2, una de las cuales es un popup y la otra la que tendría que tener el mapa. (está simulado con una tabla, pero con areas sería igual)
El código es:
Código PHP:
<html>
<head>
<script>
function zona(n) {
var destino = "popupparaborrar.html?zona=" + n;
window.open(destino, "" , "width=700,height=540");
}
</script>
</head>
<body >
<table cellspacing=0 cellpadding=0>
<tr>
<td style="text-align: center"><img src="fotos/mini/Diapositiva52.jpg" onclick="zona(0)"></td>
<td style="text-align: center"><img src="fotos/mini/Diapositiva62.jpg" onclick="zona(1)"></td>
<td style="text-align: center"><img src="fotos/mini/Diapositiva66.jpg" onclick="zona(2)"></td>
</tr>
<tr>
<td style="text-align: center"><img src="fotos/mini/Diapositiva73.jpg" onclick="zona(3)"></td>
<td style="text-align: center"><img src="fotos/mini/Diapositiva81.jpg" onclick="zona(4)"></td>
<td style="text-align: center"><img src="fotos/mini/Diapositiva82.jpg" onclick="zona(5)"></td>
</tr>
<tr>
<td style="text-align: center"><img src="fotos/mini/Diapositiva91.jpg" onclick="zona(6)"></td>
<td style="text-align: center"><img src="fotos/mini/Diapositiva95.jpg" onclick="zona(7)"></td>
<td style="text-align: center"><img src="fotos/mini/Diapositiva100.jpg" onclick="zona(8)"></td>
</tr>
</table>
</body>
</html>
... y el popup:
Código PHP:
<html>
<head>
<script>
var dibujos;
function subir() {
if (actual > 2) {
actual -= 3;
document.images.centro.src = dibujos[actual].src;
}
}
function bajar() {
if (actual < 6) {
actual += 3;
document.images.centro.src = dibujos[actual].src;
}
}
function izq() {
if ((actual % 3) > 0) {
actual -= 1;
document.images.centro.src = dibujos[actual].src;
}
}
function der() {
if ((actual % 3) < 2) {
actual += 1;
document.images.centro.src = dibujos[actual].src;
}
}
function precarga() {
var imagenes = new Array(precarga.arguments.length)
for (var i = 0; i < imagenes.length; i ++) {
imagenes[i] = new Image();
imagenes[i].src = precarga.arguments[i];
}
return imagenes;
}
function ini() {
dibujos = new precarga('fotos/maxi/Diapositiva52.jpg',
'fotos/maxi/Diapositiva62.jpg',
'fotos/maxi/Diapositiva66.jpg',
'fotos/maxi/Diapositiva73.jpg',
'fotos/maxi/Diapositiva81.jpg',
'fotos/maxi/Diapositiva82.jpg',
'fotos/maxi/Diapositiva91.jpg',
'fotos/maxi/Diapositiva95.jpg',
'fotos/maxi/Diapositiva100.jpg');
actual = parseInt(location.search.split("=")[1]);
document.images.centro.src = dibujos[actual].src;
}
</script>
</head>
<body onload="ini()" style="margin: 0;">
<table border=1 >
<tr>
<td> </td>
<td style="text-align: center" onclick="subir()"> ↑ </td>
<td> </td>
</tr>
<tr>
<td style="valign: middle" onclick="izq()" > ← </td>
<td style="text-align: center"><img name="centro" src=""></td>
<td style="valign: middle" onclick="der()" > → </td>
</tr>
<tr>
<td> </td>
<td style="text-align: center" onclick="bajar()" >↓ </td>
<td> </td>
</tr>
</table>
</body>
</html>
Es bastante sencillo, pero funciona bastante bien. Las medidas del popup las puse a ojo, pero si usas valores absolutos en los estilos, seguro que consigues un buen efecto.
Bueno, cuando esté terminado, avisa.
Saludos
