Ultimo Intento . . .

herrezuelo · #1 (**permalink**) 04/04/2004, 11:45

Me gustaria saber lo siguiente, soy muy torpe y no logro conseguirlo :
Me gustaria crear un layer, y cuando el tamaño de la pantalla varie me gustaria que el layer se ajustase al mismo, esto parece que lo he conseguido de la siguiente manera :

1 - he crado las baceceras del documento en las cuales inserto el codigo de las hojas de estilo (en cascada) de un layer (creo que esto se llama clase layer1) , tambien añado el codigo de los scripts necesarios para dimensionar el layer

<html>
<head>
<title>REDIMENSIONAR UN LAYER</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
---------------------------- Estas son las hojas de esstilo del layer o la clase layer no se muy bien si referirme asi
<style type="text/css">
#layer1 {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
height: 99%;
background-image: url("fondodeseo.jpg");
background-repeat: no-repeat;
z-index: 1;
border: 1px solid #ff0000;
}

</style>

-------------------------------------- Estos son los scripts :

<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>

2 - En el cuerpo del documento muestro el layer que intento crear :

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

Y resulta que funciona ¡¡¡¡¡¡
Cual es mi sorpresa cuando veo ke la imagen no se redimensiona , con lo que mi pregunta es :

¿ Como hago que el tamaño de la imagen varie al variar el del explorador y el de su layer contenedor, por tanto ?
¿Como hago para que no se corte (pero que el layer se ajuste tal y como lo viene haciendo)?
¿Entienden lo que digo?

Muchas gracias a kien colabore y un saludo a todos.

herrezuelo · #2 (**permalink**) 04/04/2004, 13:00

Opté por sta solucion
<style type="text/css">
#layer1 {
position: absolute;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-repeat: no-repeat;
z-index: 1;
border: 0px solid #ff0000;
}
</style>

</head>

<body>
<div id='layer1'>
<img src="fondodeseo.jpg" width="100%" height="100%">
</div>

</body>
</html>

si alguien sabe si es posible poner el fondo del layer una imagen (eso si se) y ajustar la imagen del fondo al layer por favor, me interesaria saberlo

Gracias

lemus · #3 (**permalink**) 05/04/2004, 01:03

por ejemplo tomas la resolucion del monitor con javascript..y segun eso estableces el tamaño..luego imprimes la imagen hecha para esa resolucion...Tendrás que crear una para 800,1024,etc.
mmm tambien se podría hacer algo en javascript con los width y height ...que se asginen a ciertos valores cuando cambie la resolución

herrezuelo · #4 (**permalink**) 05/04/2004, 01:59

Gracias, pero todo eso que en su dia hice con javascript lo consigo usando porcentajes en el width y height de la imagen, ahora mi principal problema/duda es, se puede modificar la imagen de fondo de un layer ? la bakground-image:url(), modificar el tamaño de la imagen del fondo ?
que varie el layer y varie la imagen asignada como imagen de fondo, sin necesidad de tener mas de un archivo de imagen.
No creo que s epueda pero por si alguien sabe como hacerlo . . .

Gracias otra vez.