Foros del Web » Creando para Internet » HTML »

Imagen Layers

Estas en el tema de Imagen Layers en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/04/2004, 03:39
 
Fecha de Ingreso: abril-2004
Ubicación: Madrid
Mensajes: 159
Antigüedad: 13 años, 8 meses
Puntos: 0
Sonrisa Imagen Layers

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>
  #2 (permalink)  
Antiguo 01/04/2004, 05:20
 
Fecha de Ingreso: abril-2004
Ubicación: Madrid
Mensajes: 159
Antigüedad: 13 años, 8 meses
Puntos: 0
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.
  #3 (permalink)  
Antiguo 01/04/2004, 06:16
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
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>&nbsp;</p>

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

Suerte

Felicidad
__________________
¡ hey, hou, hou, hey !
  #4 (permalink)  
Antiguo 01/04/2004, 07:22
 
Fecha de Ingreso: abril-2004
Ubicación: Madrid
Mensajes: 159
Antigüedad: 13 años, 8 meses
Puntos: 0
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>
  #5 (permalink)  
Antiguo 01/04/2004, 14:10
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
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>&nbsp;</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
__________________
¡ hey, hou, hou, hey !
  #6 (permalink)  
Antiguo 02/04/2004, 01:38
 
Fecha de Ingreso: abril-2004
Ubicación: Madrid
Mensajes: 159
Antigüedad: 13 años, 8 meses
Puntos: 0
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.
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 16:58.