http://www.wgeek.com.ar/blog/2008/11...1/#comment-211
y lo e adaptado para mi web. en mi web uso una imagen del mapa de españa en la cual al hacer click en una ciudad se me tendria que abrir la ventana nueva.
llevo ya varios dias intentando hacer esto con popups y e posteado aqui en foros del web pidiendo ayuda para hacer esto, pero leyendo en internet e descubierto que se hace mejor con ajax ke con la funcion windows.open("""") ya que la gente suele bloquear las ventanas emergentes con su navegador.
Este es el codigo que e copiado de la web y el cambio que le he hecho para que funcione en mi web:
Código:
<script type="text/javascript">
function showLightbox() {
document.getElementById('over').style.display='block';
document.getElementById('fade').style.display='block';
}
function hideLightbox() {
document.getElementById('over').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
Código:
<div id="over" class="overbox">esto es probando el lightt boxingg </div> <div id="fade" class="fadebox">jlkjkljklj</div>
Código:
<div id="mapa"> <img src="imagenes/MAPA_MAP_DEFAULT.GIF" alt="ESPAÑA" name="MAPAGIF" width="239" height="164" useMap = "#MAP" isMap id="MAPAGIF"></p> <p><map name = "MAP"> <area id="malaga" coords="23,128,162,161" alt="Málaga" shape="RECT" onclick="showLightbox()"/> //aqui es donde llamo a la funcion pero en el codigo original pone <a href="javascript:funcion ()"> y yo e quitado el javascript: puede ser esto lo que me hace que no funcione?// <area id="valencia" coords="153,67,189,100" alt="Valencia" shape="RECT" onclick="hideLightbox()"/> <area id="madrid" coords="63,41,121,86" alt="Madrid" shape="RECT" onclick="openCiudad()"/> <area id="barcelona" coords="159,34,226,56" alt="Barcelona" shape="RECT" onclick="openBarsa()"/> </map>
Código:
.fadebox {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.overbox {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
z-index:1002;
overflow: auto;
}
pero no me funciona y no sé por que!
saludos
ya me funciona...se me habia olvidado crear un <div> con el texto dentro del <div id="over"> ya casi lo e conseguido ya le e dado formato al texto color de fondo etc etc pero ahora tengo un problema es que el enlace que e creado siguiendo el tutorial para cerrar esta ventana no me funciona pongo el codigo como viene en el tutorial:
<a href="javascript:hideLightbox();">Cerrar</a>
pero nada que no me funciona el enlace para cerrar la ventana.. e probado a kitar el javascript: y ponerlo directamente asi
<a href="hideLightbox()">Cerrar</a>
pero tampoco.........
alguien que sepa de programacion ke me diga por ke esta simple linea de codigo no me funciona que llevo un buen rato dandole vueltas para solucionarlo pero nada..
gracias un saludo.....
ya me funciona era la propiedad creo de z-index ke le e cambiado el valor a 1001 y a 1002 ya me funciona XD
