Foros del Web » Creando para Internet » CSS »

Segunda capa

Estas en el tema de Segunda capa en el foro de CSS en Foros del Web. Hola, tengo este script, que cuando pones el raton encima cambia de imagen y arriba le sale una segunda capa donde muestra si mostrar la ...
  #1 (permalink)  
Antiguo 21/02/2010, 08:24
 
Fecha de Ingreso: enero-2009
Ubicación: España
Mensajes: 785
Antigüedad: 8 años, 10 meses
Puntos: 9
Segunda capa

Hola, tengo este script, que cuando pones el raton encima cambia de imagen y arriba le sale una segunda capa donde muestra si mostrar la anterior imagen o la siguiente:


Código:
<body>

<body onload="alternar_banner()">

<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(670,250)
array_imagen[0].src = "/slides/slide_craft_a.png"
array_imagen[1] = new Image(670,250)
array_imagen[1].src = "/slides/slide_habberos_a.png"
array_imagen[2] = new Image(670,250)
array_imagen[2].src = "/slides/slide_cs_a.png"
array_imagen[3] = new Image(670,250)
array_imagen[3].src = "/slides/slide_soccer_a.png"

//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://starcraft.gameshoot.es"
array_url[1] = "http://www.habberos.es"
array_url[2] = "http://cs.gameshoot.es"
array_url[3] = "http://soccerDT.gameshoot.es"

//variable para llevar la cuenta de la imagen siguiente
contador = 0

//función para rotar el banner
function alternar_banner(){
window.document["banner"].src = array_imagen[contador].src
window.document['banner'].parentNode.href = array_url[contador]
contador ++
contador = contador % array_imagen.length
setTimeout("alternar_banner()",7000)
} </script>
</head>

<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>

<div id="capa1" style="" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')"><a 

href="http://www.habberos.es/#"><div id="capa2" 

style="width:100%;height:15;top:100;left:200;background-color:red;visibility:hidden">Capa 2</div><img 

src="#" name="banner" onmouseover="this.src =
this.src.replace(/_\w(\.png)$/, '_b.png\1');" onmouseout="this.src = this.src.replace(/_\w(\.png)$/, '_a.png\1');"

width="670" height="250" border=0></a></div>

</body>
</html>
el problema es que me queda asi:

www.habberos.es

El div, aunque no se muestre deja un hueco entre el 1 div y la imagen del banner
como hago para colocar el div encima de la imagen y estando dentro del 1 div?
  #2 (permalink)  
Antiguo 21/02/2010, 11:41
 
Fecha de Ingreso: enero-2009
Ubicación: España
Mensajes: 785
Antigüedad: 8 años, 10 meses
Puntos: 9
Respuesta: Segunda capa

Nadie sabe???? Por si no me haveis ententido, lo que necesito es colocar un div encima de una imagen...

Última edición por SeaPirates; 21/02/2010 a las 14:09
  #3 (permalink)  
Antiguo 21/02/2010, 15:37
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Segunda capa

Para empezar, no te preocupes por que nadie te responda antes de las 24 horas.

Segundo, no detecto el problema que estás teniendo...

Y tercero, ¿Esto es de CSS? Me parece un problema de JavaScript.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 22/02/2010, 07:59
 
Fecha de Ingreso: enero-2009
Ubicación: España
Mensajes: 785
Antigüedad: 8 años, 10 meses
Puntos: 9
Respuesta: Segunda capa

El nuevo codigo:

Código HTML:
<div id="capa1" style="" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')"><div align="center" id="capa2" style="width:669px;height:20;background-color:black;opacity: .5;"><a href="">« Anterior</a> | <a href="">Siguiente »</a></div><a href="http://www.habberos.es/#"><img src="#" name="banner" onmouseover="this.src =
this.src.replace(/_\w(\.png)$/, '_b.png\1');" onmouseout="this.src = this.src.replace(/_\w(\.png)$/, '_a.png\1');"

width="670" height="250" border=0></a></div> 

El problema que tengo, esque si le pongo position:absolute y pongo margin-left y margin-top a mi se me queda cuadrado en el banner, encima de la imagen

pero a otros usuarios como no tienen la misma resolucion se les descoloca el
div id="capa2" no e como hacer para que ese div quede enciima de la imagen de modo que todos lo vean centrado
  #5 (permalink)  
Antiguo 22/02/2010, 08:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Segunda capa

Hola:

Cita:
Iniciado por daPhyre Ver Mensaje
Para empezar, no te preocupes por que nadie te responda antes de las 24 horas.
Y sobretodo en fin de semana.

Saludos.

  #6 (permalink)  
Antiguo 22/02/2010, 23:38
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Segunda capa

¡Ya entiendo tu problema! (Y con mucha razón)

Intenta poner un position:relative al contenedor de ambos elementos, y luego ajustar los nuevos valores con respecto a este. Avísame si estoy en lo correcto. Mucha suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:32.