Pregunta Complicada

ingryd · #1 (**permalink**) 23/07/2004, 18:03

Tengo Un Problema Y Como No Veo Como Resolverlo, Se Me Ocurrrio Una Cosa, Je,je,je, No Se Si Se Pueda Pero Espero Que Alguien X Lo Menos Me DesengaÑe,

Puede Una Misma Capa Mostrar Diferentes Imagenes, Digamos Que Tengo Dos Botones, A, Y B, Cuando Se Pulse Sobre El Boton A, La Capa Muestre Una Imagen Y Cuando Se Pulse El Boton B La Capa Muestre Otra Imagen Diferente?????
Pero Con La Misma Capa...

Necesito Que Cuando Un Usuario Pulse Sobre Un Boton Aparesca Una Capa Como Fondo Para Un Menu, Y Cundo El Usuario Pulse Sobre Otro Boton Aparesca Otra, Y Hasta Ahora Solo Me Sale Con Una Sola Imagen, Cuando Pongo Otra Capa El Menu Aparece X Debajo De La Capa Y No Se Aprecia

PatomaS · #2 (**permalink**) 24/07/2004, 02:54

Hola

;)

Bueno, no hay problema, aquí te dejo una página de ejemplo de lo que quieres:

Código:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<style type="text/css">
.capita {
	background-image: url('imagen_1.gif');
	background-repeat: repeat;
	width: 100px;
	height: 100px;
}
</style>
<script type="text/javascript">
<!--
	function cambiar_fondo(x) {
		if (x == 1) {
			document.getElementById('capita').style.backgroundImage = "url('imagen_2.gif')"
		} else {
			document.getElementById('capita').style.backgroundImage = "url('imagen_1.gif')"
		}
	}
//-->
</script>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p><a href="javascript:cambiar_fondo(1)">al presionar aquí, cambia el fondo de la capa de abajo</a></p>
<p>&nbsp;</p>
<div class="capita" id="capita">
</div>
<p><a href="javascript:cambiar_fondo(0)">al presionar aquí, cambia el fondo de la capa de arriba</a></p>
</body>
</html>

Como ves, es sencillo, en el ejemplo utilizo dos vínculos y dos imágenes, pero en caso de que necesitaras más imágenes, solo habría que hacer algún pequeño cambio en el script.

Suerte

Felicidad

PatomaS · #3 (**permalink**) 24/07/2004, 11:20

Hola nuevamente

Para mantener la capa debajo del texto o el texto por encima de la capa de fondo, hay varias maneras, esta es una de ellas.

Código:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<style type="text/css">
.capita {
	background-image: url('flecha.gif');
	background-repeat: repeat;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
}
.textos {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;
}
</style>
<script type="text/javascript">
<!--
	function cambiar_fondo(x) {
		if (x == 1) {
			document.getElementById('capita').style.backgroundImage = "url('cine.gif')"
		} else {
			document.getElementById('capita').style.backgroundImage = "url('flecha.gif')"
		}
	}
//-->
</script>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>&nbsp;</p>
<div class="capita" id="capita">
</div>
<div class="textos">
	<p><a href="javascript:cambiar_fondo(1)">al presionar aquí, cambia el fondo de la capa</a></p>
	<p><a href="javascript:cambiar_fondo(0)">al presionar aquí, vuelve a cambiar el fondo de la capa</a></p>
</div>
</body>
</html>

Felicidad