Imagen Layers

herrezuelo · #1 (**permalink**) 01/04/2004, 03:39

Hola.
Intento crear un layer con una imagen de fondo, lo ke kiero es ke este layer sea el fondo de mi pagina.
Mi problema es que la imagen no se redimensiona al cambiar el tamaño del explorer, mi codigo es este.
La imagen no se ajusta ¡¡¡ cuando hago mas pequeña la ventanita del explorer.
A ver si alguno me puede ayudar por favor . . .

<HTML>

<HEAD><TITLE>Ejemplo del uso de layer-background-image</TITLE>
</HEAD>
<STYLE TYPE="text/css">

#layer1 {
position:absolute;
width:100%;
height:100%;
background-image:url("imagen.jpg");
}
</STYLE>

<BODY BGCOLOR=white>

<DIV id=layer1>
</DIV>

</BODY>

<SCRIPT>
var layerWidth = 300;
var oldX;
var layer1 = document.layers['layer1'];

layer1.document.captureEvents(Event.MOUSEUP|Event. MOUSEDOWN);

layer1.document.onmousedown=begindrag;
layer1.document.onmouseup=enddrag;
layer1.onload=resetcapture;

function resetcapture()
{
layer1.document.captureEvents(Event.MOUSEUP|Event. MOUSEDOWN|Event.MOUSEDRAG|Event.MOUSEMOVE);
}

function begindrag(e)
{
layer1.document.captureEvents(Event.MOUSEMOVE);
layer1.document.onmousemove=drag;
oldX=e.pageX;
return false;
}

function drag(e)
{
changeWidth(layer1, e.pageX - oldX);
oldX = e.pageX;
return false;
}

function changeWidth(layer, delta)
{
layer.bgColor = "#99BBFF";
layerWidth = layerWidth + delta;
if (delta != 0)
layer.load("inc1.htm", layerWidth);
}

function enddrag(e)
{
layer1.document.onmousemove=0;
layer1.document.releaseEvents(Event.MOUSEMOVE);
return false;
}
</SCRIPT>

</HTML>

herrezuelo · #2 (**permalink**) 01/04/2004, 05:20

Por si no me expliké del todo bien.
Kiero poner una imagen de fondo de pagina, la quiero poner con un layer.
Es decir, kiero ke el fondo de mi pagina sea una capa con una imagen, pero quiero que cuando cambie el tamaño del explorador la imagen se ajuste al nuevo tamaño, es decir, el layer se ajuste al nuevo tamaño y la imagen se ajuste al nuevo tamaño del layer para que no se corte cuando hago un resize de la pagina.
A ver si me podeis ayudar por favor.

PatomaS · #3 (**permalink**) 01/04/2004, 06:16

Hola

Bueno, vamos a ver, hay muchas cosas con ese código.

Para empezar, usas el objeto layer dentro del script para modificarlo. Este objeto es solo de netscape. Además, no funciona desde la versión 6 de netscape, así que seguramente no te funcione en casi ningún navegador que puedas tener.

Tienes qe usar el siguiente manejador:

document.getElementById('nombre')

Obviamente, a la capa que quieras modificar, le tendrás que poner un id, por ejemplo así:

id='nombre'

Todos los valores, deberías colocarlos entre comillas, por ejemplo:

<DIV id='layer1'>

y mejor que las etiquetas estén escritas en minúsculas, aunque esto y el punto anterior, solo son normas para escribir un código correcto, en principio no afectan a la función de lo que quieres.

al script, le deberías indicar de que tipo es, por ejemplo

<script type="text/javascript">

Otra cosa, tienes que poner relleno en la capa que utilizas, de lo contrario, su altura será de 0px y por lo tanto, no hay área en la que se pueda ver la imagen de fondo. Prueba por ejemplo colocando esto:

<p> </p>

son solo espacios en blanco, pero te sirve para que la empieces a ver.

Suerte

Felicidad

herrezuelo · #4 (**permalink**) 01/04/2004, 07:22

Muchas gracias por tu explicacion,pero sigue cortandose la imagen al cambiar el tamaño de la ventana del IE . . .
He empezado ahora con esto de html, php, javascript . . . me averguenza mi torpeza pero . . . creo que este foro es una buena forma de aprender y asentar conociemientos, en fin . . .
El codigo me kedó asi tras tus indicaciones (no se si está mal poner tanto código aki . . .)
No me funciona

. . .

<HTML>

<HEAD><TITLE>Ejemplo del uso de layer-background-image</TITLE>
</HEAD>
<STYLE TYPE="text/css">

#layer1 {
position:absolute;
width:100%;
height:100%;
background-image:url("fondodeseo.jpg");
z-index:1
}
</STYLE>

<BODY BGCOLOR=white>

<DIV id='layer1'>
<p> </p>
</DIV>

</BODY>

<script type="text/javascript">
var layerWidth = 300;
var oldX;
var layer1 = document.getElementById('layer1');

layer1.document.captureEvents(Event.MOUSEUP|Event. MOUSEDOWN);
layer1.document.onmousedown=begindrag;
layer1.document.onmouseup=enddrag;
layer1.onload=resetcapture;

function resetcapture()
{
layer1.document.captureEvents(Event.MOUSEUP|Event. MOUSEDOWN|Event.MOUSEDRAG|Event.MOUSEMOVE);
}

function begindrag(e)
{
layer1.document.captureEvents(Event.MOUSEMOVE);
layer1.document.onmousemove=drag;
oldX=e.pageX;
return false;
}

function drag(e)
{
changeWidth(layer1, e.pageX - oldX);
oldX = e.pageX;
return false;
}

function changeWidth(layer, delta)
{
layer.bgColor = "#99BBFF";
layerWidth = layerWidth + delta;
if (delta != 0)
layer.load("fondodeseo.jpg", layerWidth);
}

function enddrag(e)
{
layer1.document.onmousemove=0;
layer1.document.releaseEvents(Event.MOUSEMOVE);
return false;
}
</SCRIPT>

</HTML>

PatomaS · #5 (**permalink**) 01/04/2004, 14:10

Hola

Bueno, reescribí un pelín tu código a fin de corregir errores de programación, lo podrás ver aquí abajo:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#layer1 {
	position: absolute;
        top: 0px;
        left: 0px;
	width: 99%;
	height: 99%;
	background-image: url("home.jpg");
	background-repeat: no-repeat;
	z-index: 1;
	border: 1px solid #ff0000;
}

</style>
<script type="text/javascript">
	var layerWidth = 300;
	var oldX;
	var layer1 = document.getElementById('layer1');

	layer1.document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
	layer1.document.onmousedown=begindrag;
	layer1.document.onmouseup=enddrag;
	layer1.onload=resetcapture;

	function resetcapture() {
		layer1.document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG|Event.MOUSEMOVE);
	}

	function begindrag(e) {
		layer1.document.captureEvents(Event.MOUSEMOVE);
		layer1.document.onmousemove=drag;
		oldX=e.pageX;
		return false;
	}

	function drag(e) {
		changeWidth(layer1, e.pageX - oldX);
		oldX = e.pageX;
		return false;
	}

	function changeWidth(layer, delta) {
		layer.bgColor = "#99BBFF";
		layerWidth = layerWidth + delta;
		if (delta != 0)
		layer.load("fondodeseo.jpg", layerWidth);
	}

	function enddrag(e) {
		layer1.document.onmousemove=0;
		layer1.document.releaseEvents(Event.MOUSEMOVE);
		return false;
	}
</SCRIPT>
</head>

<body bgcolor="#FFFFFF">
<div id='layer1'>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
</div> 
</body>
</html>

Los "<p> </p>", son los espacio en blacon con saltos de línea (o párrafo)

Con eso logras que la imagen esté como fondo de una página dado que está de fondo de una capa y luego colocarías o posicionarias en contenido sobre ella.

Pero con esto no se logra que se redimensione la imagen.

En este momento, no recuerdo haber visto un código que permita redimensionar una imagen colocada de fondo en una capa, por lo que, en mi ignorancia, me atrevería a decir que no es posible.

Aprovecho a recordarte que el objeto layeers, es solo de netscape 4.

Si encuentro la forma ya la pondré por aquí.

Aun queda la posibilidad de que los verdaderos expertos responda con una solución sorprendente

:)

Felicidad

herrezuelo · #6 (**permalink**) 02/04/2004, 01:38

Gracias ¡¡¡¡
me ha sido de gran ayuda tu explicacion, creo que de eso se trata , lo que necesito es ajustar la imagen al layer, reidmensionar la imagen de fondo del layer.
Se hacerlo si la pongo como fondo del documento, lo que no se hacer es redimensionar el fondo del layer . . .

A ver si hay suerte y alguien me responde como hacerlo.

Gracias otra vez Patomas.

Un saludo.