bueno como sabras es auto cerada por el code pero pondre un ejemplo de lo creado, el porblema es que cuando son imagene smuy largas y hay otra atras de ella se tapa ya intente poner primero la de atras y luego al de adelante y suige igaul :S
Código HTML:
<script language="javascript">
function casilla(numero, cons, lvl) {
if(cons == 0) {
cons = "N/A";
}else if (cons == 1){
cons = "Casa";
}else if(cons == 2) {
cons = "Casa";
}else if(cons == 3) {
cons = "Laboratorio";
}else if(cons == 4) {
cons = "Laboratorio";
}else if(cons == 5) {
cons = "Embajada";
}else if(cons == 6) {
cons = "Embajada";
}else if(cons == 7) {
cons = "Bosque";
}else if(cons == 8) {
cons = "Bosque";
}
if(lvl == 0) {
lvl = "N/A";
}
if(numero == 0) {
document.getElementById('campo').innerHTML = " ";
document.getElementById('cons').innerHTML = " ";
document.getElementById('lvl').innerHTML = " ";
}else{
document.getElementById('campo').innerHTML = numero;
document.getElementById('cons').innerHTML = cons;
document.getElementById('lvl').innerHTML = lvl;
}
}
function ventana(casilla) {
window.opener.loadurl('construir.php?id_construir='+casilla+'', 'main');
window.close()
}
function ventana2(casilla2) {
window.opener.loadurl('construir.php?id_construir='+casilla2+'', 'main');
window.close()
}
</script>
<link href="css.css" rel="stylesheet" type="text/css">
<style type="text/css">
<div id="apDiv41"><a href="#" onclick = "ventana2(26)" onmouseover="casilla(26, 6, 1)" onmouseout="casilla(0,0,0)"><img src="imagenes/embajada.png" width="18" height="39" border="0"/></a></div><div id="apDiv9"><a href="#" onclick = "ventana2(27)" onmouseover="casilla(27, 2, 1)" onmouseout="casilla(0,0,0)"><img src="imagenes/casa.png" width="25" height="27" border="0"/></a></div><div id="apDiv10"><a href="#" onclick = "ventana2(28)" onmouseover="casilla(28, 4, 0)" onmouseout="casilla(0,0,0)"><img src="imagenes/laboratorio.png" width="25" height="27" border="0"/></a></div><div id="apDiv72"><a href="#" onclick = "ventana2(29)" onmouseover="casilla(29, 8, 1)" onmouseout="casilla(0,0,0)"><img src="imagenes/bosque.png" width="87" height="46" border="0"/></a></div><div id="apDiv73"><a href="#" onclick = "ventana2(30)" onmouseover="casilla(30, 8, 1)" onmouseout="casilla(0,0,0)"><img src="imagenes/bosque.png" width="87" height="46" border="0"/></a></div><title>Mapa del Imperio</title><div id="apDiv1"><span class="div"><img src="imagenes/mapa.png" width="426" height="183" border="0" usemap="#Map"></span><span class="div">
<map name="Map">
<area shape="poly" coords="384,82,425,103,377,119,339,98" href="" onclick="ventana('50')" onmouseover="casilla(50, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="340,98,381,119,333,135,295,114" href="" onclick="ventana('45')" onmouseover="casilla(45, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="295,114,336,135,288,151,250,130" href="" onclick="ventana('40')" onmouseover="casilla(40, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="250,130,291,151,243,167,205,146" href="" onclick="ventana('35')" onmouseover="casilla(35, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="204,145,245,166,197,182,159,161" href="" onclick="ventana('30')" onmouseover="casilla(30, 8, 1)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="347,61,388,82,340,98,302,77" href="" onclick="ventana('49')" onmouseover="casilla(49, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="301,77,342,98,294,114,256,93" href="" onclick="ventana('44')" onmouseover="casilla(44, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="257,92,298,113,250,129,212,108" href="" onclick="ventana('39')" onmouseover="casilla(39, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="213,109,254,130,206,146,168,125" href="" onclick="ventana('34')" onmouseover="casilla(34, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="164,124,205,145,157,161,119,140" href="" onclick="ventana('29')" onmouseover="casilla(29, 8, 1)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="309,40,350,61,302,77,264,56" href="" onclick="ventana('48')" onmouseover="casilla(48, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="263,56,304,77,256,93,218,72" href="" onclick="ventana('43')" onmouseover="casilla(43, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="216,71,257,92,209,108,171,87" href="" onclick="ventana('38')" onmouseover="casilla(38, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="171,88,212,109,164,125,126,104" href="" onclick="ventana('33')" onmouseover="casilla(33, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="123,104,164,125,116,141,78,120" href="" onclick="ventana('28')" onmouseover="casilla(28, 4, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="265,20,306,41,258,57,220,36" href="" onclick="ventana('47')" onmouseover="casilla(47, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="221,35,262,56,214,72,176,51" href="" onclick="ventana('42')" onmouseover="casilla(42, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="175,51,216,72,168,88,130,67" href="" onclick="ventana('37')" onmouseover="casilla(37, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="129,68,170,89,122,105,84,84" href="" onclick="ventana('32')" onmouseover="casilla(32, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="84,83,125,104,77,120,39,99" href="" onclick="ventana('27')" onmouseover="casilla(27, 2, 1)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="225,-1,266,20,218,36,180,15" href="" onclick="ventana('46')" onmouseover="casilla(46, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="181,14,222,35,174,51,136,30" href="" onclick="ventana('41')" onmouseover="casilla(41, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="136,30,177,51,129,67,91,46" href="" onclick="ventana('36')" onmouseover="casilla(36, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="90,46,131,67,83,83,45,62" href="" onclick="ventana('31')" onmouseover="casilla(31, 0, 0)" onmouseout="casilla(0,0,0)">
<area shape="poly" coords="43,62,84,83,36,99,-2,78" href="" onclick="ventana('26')" onmouseover="casilla(26, 6, 1)" onmouseout="casilla(0,0,0)">
</map>
</span></div>
<div class="letras3" id="apDiv2">
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="23"><span class="letras3">Construido: </span></td>
<td class="letras2"><div class="letras2" id="cons"></div></td>
</tr>
<tr>
<td height="23"><span class="letras3">Nivel: </span></td>
<td class="letras2"><div class="letras2" id="lvl"></div></td>
</tr>
<tr>
<td width="71" height="23"><span class="letras3">Casilla:</span></td>
<td width="129"><div class="letras2" id="campo"></div></td>
</tr>
</table>
</div>
<div class="titulo" id="apDiv8">
<div align="center" class="titulo">Mapa de Construccion</div>
</div>
<map name="MapMap">
<area shape="poly" coords="45,62,86,83,38,99,0,78" href="#">
</map>
<div id="apDiv4"><a href="mapa.php?id_mapa=31"><img src="imagenes/mapa_flecha.png" width="33" height="25" border="0" /></a></div>
<div id="apDiv5"><a href="mapa.php?id_mapa=21"><img src="imagenes/mapa_flecha2.png" alt="" width="33" height="25" border="0" /></a></div>
<div id="apDiv6"><a href="mapa.php?id_mapa=25"><img src="imagenes/mapa_flecha3.png" width="32" height="26" border="0" /></a></div>
<div id="apDiv7"><a href="mapa.php?id_mapa=27"><img src="imagenes/mapa_flecha4.png" width="34" height="27" border="0"/></a></div>