Foros del web, para los que viven de bits

K3NNY · 29-jul-2005, 11:39

Tengo un menu que consiste en varias imagenes (que a su ves son links) en parte superpuestas. Lo que quiero es que al hacer click en una de las imagenes/links y al cargarse la nueva pagina suba la imagen por sobre las otras que antes la tapaban (o no). Pensaba aplicarle un mismo estilo a todas las imagenes y al atributo a:active ponerle un z-index de 1, pero no logro hacerlo funcionar. A alguien se le ocurre como podria hacerlo? (sin Javascript en lo posible)

CORE · 29-jul-2005, 16:55

jaja me diverti mucho por que salian estilos muy distorcinados la solucion creo yo esta en hacerlo con capas y ponerles un fondo de imagen y dentro de ellos texto con enlace

lo que yo hice fue esto

Código HTML:

<style type="text/css">
<!--
#contenedor {
	margin:0 auto;
	height: 480px;
	width: 480px;
	border:1px solid silver
}
#contenedor a img{
	height: 150px;
	width: 150px;
	position: relative;
	padding-right:10px; padding-bottom:10px;
}
#contenedor a img:active{ 
	position: absolute; 
	width:200px; 
	height:200px; 
	left:10px; 
	top:10px;
}
-->
</style>

el html

Código HTML:

<div id="contenedor"><a href="#"><img src="cuadritos_r1_c1.gif" border="0" /></a><a href="#"><img src="cuadritos_r1_c2.gif" border="0" /></a><a href="#"><img src="cuadritos_r1_c3.gif" border="0" /></a><a href="#"><img src="cuadritos_r2_c1.gif" border="0" /></a><a href="#"><img src="cuadritos_r2_c2.gif" border="0" /></a><a href="#"><img src="cuadritos_r2_c3.gif" border="0" /></a><a href="#"><img src="cuadritos_r3_c1.gif" border="0" /></a><a href="#"><img src="cuadritos_r3_c2.gif" border="0" /></a><a href="#"><img src="cuadritos_r3_c3.gif" border="0" /></a></div>

K3NNY · 07-ago-2005, 11:13

Uhh, buenisimo che, tiene muy buena pinta. Pero hay un pequeño problemita. Cuando dije "suba la imagen por sobre las otras que antes la tapaban" no me referia a cambiar el top dela imagen sino el z-index, osea, la imagen queda exactamente en el mismo lugar pero si antes alguna otra imagen la tapaba, ahora esta tapa a las otras. La idea es que tengo un menu a la izquierda con imagenes/links posicionadas absolutamente, y algunas imagenes se superponen unos 10px por decir algo. La idea es que al hacer click en la imagen esa imagen suba por encima de las otras, de manera que quedando en el mismo lugar no este tapada por las imagenes adjacentes, sino que pase esta a tapar a las otras.

PD: Igual esta bueno el codigo que pusiste, me dieron ganas de implementarlo en algun otro lado. ;)

29-jul-2005, 11:39	#1 (permalink)
K3NNY Colaborador Fecha de Ingreso: marzo-2004 Ubicación: ARGENTINA! Mensajes: 1.497	Como cambiar el z-index de una imagen/link "active"? Tengo un menu que consiste en varias imagenes (que a su ves son links) en parte superpuestas. Lo que quiero es que al hacer click en una de las imagenes/links y al cargarse la nueva pagina suba la imagen por sobre las otras que antes la tapaban (o no). Pensaba aplicarle un mismo estilo a todas las imagenes y al atributo a:active ponerle un z-index de 1, pero no logro hacerlo funcionar. A alguien se le ocurre como podria hacerlo? (sin Javascript en lo posible) __________________ delFuego.com.ar mi tumblelog sobre diseño La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.

07-ago-2005, 11:13	#3 (permalink)
K3NNY Colaborador Fecha de Ingreso: marzo-2004 Ubicación: ARGENTINA! Mensajes: 1.497	Uhh, buenisimo che, tiene muy buena pinta. Pero hay un pequeño problemita. Cuando dije "suba la imagen por sobre las otras que antes la tapaban" no me referia a cambiar el top dela imagen sino el z-index, osea, la imagen queda exactamente en el mismo lugar pero si antes alguna otra imagen la tapaba, ahora esta tapa a las otras. La idea es que tengo un menu a la izquierda con imagenes/links posicionadas absolutamente, y algunas imagenes se superponen unos 10px por decir algo. La idea es que al hacer click en la imagen esa imagen suba por encima de las otras, de manera que quedando en el mismo lugar no este tapada por las imagenes adjacentes, sino que pase esta a tapar a las otras. PD: Igual esta bueno el codigo que pusiste, me dieron ganas de implementarlo en algun otro lado. ;) __________________ delFuego.com.ar mi tumblelog sobre diseño La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado