como le doy color y centro la foto

oscar pereyra · #1 (**permalink**) 11/02/2003, 21:01

HOLA A TODOS:
QUISIERA SABER COMO LE PUEDO DAR COLOR A LA VENTANA Y COMO CENTRO LA FOTO QUE ESTA DENTRO DE LA MISMA. DESDE YA MUCHAS GRACIAS.
AQUÍ LE MANDO EL SCRIPT:

<script>
function copyrightIntro(url)
{
if (!document.layers&&!document.all&&!document.getEle mentById)
{
paramstp="height=400,width=400,top=0,left=0,scroll bars=yes,location=no"+
",directories=no,status=no,menubar=no,toolbar=no,r esizable=yes"
var crw=window.open(url,"",paramstp);
if (crw.focus){crw.focus();}
return;
}
var winwidth=200;
var winheight=50;
var winreswidth=window.screen.availWidth;
var winresheight=window.screen.availHeight;
var LeftPosition=(winreswidth-winwidth)/2;
var TopPosition=winresheight-winheight/2;

var paramstr="left="+LeftPosition+",top="+TopPosition+ ",width="+winwidth+
",height="+winheight+",toolbar=no,menubar=no,locat ion=no,"+
"status=no,scrollbars=yes,resizable=yes";
var crw=open(url,"",paramstr);

crw.resizeBy(0,-40);

var resspeed=100;
var wspeed=winreswidth/resspeed;
var hspeed=winresheight/resspeed;
var x=wspeed;

while (x)
{
crw.resizeBy(x,0);
winwidth+=x;
LeftPosition=(winreswidth-winwidth)/2;
TopPosition-=wspeed;
if (LeftPosition<0) LeftPosition=0;
if (TopPosition<0) TopPosition=0;
crw.moveTo(LeftPosition,TopPosition);
if (winwidth>=winreswidth) x=0;

}
crw.moveTo(0,0);

var y=hspeed;
winheight=50;
while(y)
{
crw.resizeBy(0,y);
winheight+=y;
if (winheight>=winresheight) y=0;
}
crw.resizeTo(winreswidth,winresheight);
if (crw.focus){crw.focus();}
}
</script><title>core</title>
</HEAD>

<body bgcolor="#FFFFFF">
<input type="button" value="Abrir Ventana" onclick="copyrightIntro('paisaje.jpg')">

caricatos · #2 (**permalink**) 12/02/2003, 03:32

Hola oscar pereyra:

Para centrar la foto, deberías llamar a una página html y no a un documento jpg, entonces te recomiendo que modifiques el script: copyrightIntro(url)

var crw=window.open(url ,"",paramstp);
cambiar url x "" => se abre una página en blanco...
luego crear una linea como esta:
var interior = "<html><body style='background-image:url(" + url;
interior += ");background-color:" + el_color_que_quieras ;
interior += ";background-atachment:fixed;background-position;center center";
interior += "'></body></html>";
...
y antes del return de la función, escribir esta línea en el documento:

crw.document.write(interior);

Te lo dije de memoria, así que puede que falle algo, pero con estilos evitas tener que hacer el cálculo del tamaño de la imagen para posicionarla.

Saludos

caricatos · #3 (**permalink**) 12/02/2003, 10:18

Hola otra vez:

Me había olvidado en el atributo de repes...

background-repeat:no-repeat...

Probé el script y va bien, aunque detrás de background-position puse ";" (punto y coma) y debe llevar ":" (dos puntos)...

Saludos

oscar pereyra · #4 (**permalink**) 13/02/2003, 02:27

Hola Caricatos:
Te agradezco tu respuesta pero no consigo ensamblar el script, te mando como me quedó conformado y por favor si podés haceme las correcciones del caso. Muchas gracias.

<script>
function copyrightIntro(url)
{
if (!document.layers&&!document.all&&!document.getEle mentById)
{
paramstp="height=400,width=400,top=0,left=0,scroll bars=yes,location=no"+
",directories=no,status=no,menubar=no,toolbar=no,r esizable=yes"
var crw=window.open(url,"",paramstp);
if (crw.focus){crw.focus();}
crw.document.write(interior);
return;
var interior = "<html><body style='background-image:url(" + url;
interior += ");background-color:" + #000fff ;
interior += ";background-atachment:fixed;background-position:center center";
interior += "'></body></html>";
}
var winwidth=200;
var winheight=50;
var winreswidth=window.screen.availWidth;
var winresheight=window.screen.availHeight;
var LeftPosition=(winreswidth-winwidth)/2;
var TopPosition=winresheight-winheight/2;

var paramstr="left="+LeftPosition+",top="+TopPosition+ ",width="+winwidth+
",height="+winheight+",toolbar=no,menubar=no,locat ion=no,"+
"status=no,scrollbars=yes,resizable=yes";
var crw=window.open(url ,"",paramstp);
cambiar url x "" => se abre una página en blanco...
crw.resizeBy(0,-40);

var resspeed=100;
var wspeed=winreswidth/resspeed;
var hspeed=winresheight/resspeed;
var x=wspeed;

while (x)
{
crw.resizeBy(x,0);
winwidth+=x;
LeftPosition=(winreswidth-winwidth)/2;
TopPosition-=wspeed;
if (LeftPosition<0) LeftPosition=0;
if (TopPosition<0) TopPosition=0;
crw.moveTo(LeftPosition,TopPosition);
if (winwidth>=winreswidth) x=0;

}
crw.moveTo(0,0);

var y=hspeed;
winheight=50;
while(y)
{
crw.resizeBy(0,y);
winheight+=y;
if (winheight>=winresheight) y=0;
}
crw.resizeTo(winreswidth,winresheight);
if (crw.focus){crw.focus();}
}
</script><title>core</title>

</HEAD>

<BODY bgcolor="#999999">
var interior = "<html><body style='background-image:url(" + url;
interior += ");background-color:" + #000fff ;
interior += ";background-atachment:fixed;background-position:center center";
interior += "'></body></html>";
</BODY>
</HTML>

caricatos · #5 (**permalink**) 13/02/2003, 02:36

Hola otra vez:

El error que has cometido, es que has escrito en el documento algo que no estaba definido, ya que la definición se hace pocas líneas después

...

Te mando la página con la que hice las pruebas:

<html>
<head>
<script language="javascript">
var paramstp = "";
function ini(url) {
var crw=window.open(url ,"",paramstp);
var interior = "<html><body style='background-image:url(" + url;
interior += ");background-color:" + "red" ;
interior += ";background-atachment:fixed;background-position:center center;background-repeat:no-repeat";
interior += "'></body></html>";
crw.document.write(interior);
}
</script>
</head>
<body onload="ini('careto.gif')">

</body>
</html>

En rojo marqué la definición de "interior" y en azul está el sitio en donde se usa...

Saludos

oscar pereyra · #6 (**permalink**) 13/02/2003, 13:16

Hola amigo:

Por favor, traté por todos los medios de configurar el script y no pude conseguir el efecto, es que soy nuevo en esto y hay que sufir un poco. Te pido encarecidamente que me configures el scrit que te envío para ver donde tengo el error y puedo seguir aprendiendo, de a poco aunque sea. Saludos, muchas gracias. Oscar

<BODY bgcolor="#999999">
<body onload="ini('careto.gif')">
var interior = "<html><body style='background-image:url(" + url;
interior += ");background-color:" + #000fff ;
interior += ";background-atachment:fixed;background-position:center center";
interior += "'></body></html>";


<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH=800 HEIGHT=700>
<PARAM NAME=movie VALUE="Película1.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#999999> <EMBED src="Película1.swf" quality=high bgcolor=#999999 WIDTH=800 HEIGHT=700 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>
</BODY>
</HTML>

caricatos · #7 (**permalink**) 13/02/2003, 14:00

Hola oscar:

Espera que voy a por una cerveza, ya que creo que necesitas una especie de clase magistral...

Voy a centrarme en el primer caso y en lo que piedes, que aunque no lo he probado, creo que funciona, pero no cumple el objetivo de centrar la foto.
El método javascript que abre una ventana es "window.open", y se le pueden dar ciertos parámetros, que se pueden ver en las FAQs (nº 100)
Pero los que nos interesan son los siguientes:

El primero es el nombre del fichero que se quiere abrir...
... que pueden ser de cualquier tipo, pero debería reconocerlo el explorador, por ejemplo ficheros html o ficheros gráficos.
Si es html se mostrará tal como se muestran las páginas web, y si es un gráfico se muestra tal como se le antoja al navegador. Y ese era tu problema... porque quieres que se centre la imagen. Y por eso trataremos de abrir una página web.
... Esa es la razón por la que en el script que te propuse el primer parámetro se corresponde con la cadena vacía, ya que si bien queremos mostrar una foto, esa foto puede estar en un tag normal html... el más básico es img... pero luego te explicaré como se tendría que usar ese tag, y por qué no lo vamos a usar...

El segundo parámetro se corresponde con la ventana de las disponibles en donde se abrirá el documento. Si como parámetro se pusiese la cadena "_self", haría las veces de un link normal.

Ejemplo de equivalencia entre html y javascript:
<a href="una_página.html">link</a>
<a onclick="window.open('una_página.html', '_self', '')">link</a>

El primer caso es html, y el link se marca con los estilos típicos de los enlaces...
El segundo caso debería hacer exactamente lo mismo, pero sin que el explorador los muestre como enlaces...

Y el tercer parámetro son propiedades para la nueva ventana... Supongo que debe ser opcional, ya que si el segundo parámetro es _self, las propiedades de la ventana no cambian.

--- continuará ---

caricatos · #8 (**permalink**) 13/02/2003, 14:27

--- continuación ---

Espero que más o menos sepas el funcionamiento de "open"...

Sabiendo que abre ventanas, y el primero de los parámetros es la página que se va a cargar, ¿qué pasaría si ese parámetro es una cadena vacía?...

La respuesta es tan sencilla como que lo que se carga es una página en blanco.
¿Y para qué sirve una página en blanco?
Respuesta: para poner lo que me dé la gana...
... y lo más importante... ¡Como me dé la gana!...

y ¿cómo pongo cosas en una página web?
Respuesta: con el método javascript:write/writeln

Ahora viene lo más importante...
...

Cita:

COMO LE PUEDO DAR COLOR A LA VENTANA Y COMO CENTRO LA FOTO QUE ESTA DENTRO DE LA MISMA

Si haces una página con una foto centrada y con un fondo determinado, quedaría +/- como lo que puse en la variable interior:
var interior = "<html><body style='background-image:url(" + url;
interior += ");background-color:" + #000fff ;
interior += ";background-atachment:fixed;background-position:center center";
interior += "'></body></html>";

vamos a hacer la página correspondiente a esa cadena:

<html>
<body style='background-image:url(url );background-color:color ;background-atachment:fixed;background-position:center center'>
</body>
</html>

... si copias esa página y cambias lo que está en rojo por el nombre de un fichero gráfico, y lo que está en azul por un color que reconozca los navegadores, verás que se queda centrado, y el fondo de la página es el que has elegido.

Entonces... lo que tienes que conseguir que se escriba en la página es eso mismo...

Para eso, la variable interior, debes usarla dentro de la función para abrir las ventanas, y es lo que tienes que escribir en la página "en blanco".

Lo último que has copiado tiene algo de flash, que no tiene nada que ver con el asunto...

El script que abre las páginas debe estar en el head, y en el ejemplo yo lo puse actuando sobre el evento onload (cuando arranca), pero se puede asociar a cualquier enlace o tag con el evento onclick...

--- continuará ---

caricatos · #9 (**permalink**) 13/02/2003, 14:41

Para terminar voy a poner el script original y la modificación necesaria para que funcione...
<head>
<script>
function copyrightIntro(url)
{
if (!document.layers&&!document.all&&!document.getEle mentById)
{
paramstp=" height=400,width=400,top=0,left=0,scrollbars=yes,l
ocation=no"+
" ,directories=no,status=no,menubar=no,toolbar=no,re
sizable=yes"
//var crw=window.open(url ,"",paramstp);
var crw=window.open("" , "", paramstp);

var interior = "<html><body style='background-image:url(" + url;
interior += ");background-color:" + "red" ;
interior += ";background-atachment:fixed;background-position:center center;background-repeat:no-repeat";
interior += "'></body></html>";
crw.document.write(interior);
if (crw.focus){crw.focus();}
return;
}
var winwidth=200;
var winheight=50;
var winreswidth=window.screen.availWidth;
var winresheight=window.screen.availHeight;
var LeftPosition=(winreswidth-winwidth)/2;
var TopPosition=winresheight-winheight/2;

var paramstr="left="+LeftPosition+",top="+TopPosition+ ",width="+winwidth+
",height="+winheight+",toolbar=no,menubar=no,locat ion=no,"+
"status=no,scrollbars=yes,resizable=yes";
var crw=open(url,"",paramstr);

crw.resizeBy(0,-40);

var resspeed=100;
var wspeed=winreswidth/resspeed;
var hspeed=winresheight/resspeed;
var x=wspeed;

while (x)
{
crw.resizeBy(x,0);
winwidth+=x;
LeftPosition=(winreswidth-winwidth)/2;
TopPosition-=wspeed;
if (LeftPosition<0) LeftPosition=0;
if (TopPosition<0) TopPosition=0;
crw.moveTo(LeftPosition,TopPosition);
if (winwidth>=winreswidth) x=0;

}
crw.moveTo(0,0);

var y=hspeed;
winheight=50;
while(y)
{
crw.resizeBy(0,y);
winheight+=y;
if (winheight>=winresheight) y=0;
}
crw.resizeTo(winreswidth,winresheight);
if (crw.focus){crw.focus();}
}
</script>
</head>

Espero que te sirva...

Saludos

oscar pereyra · #10 (**permalink**) 13/02/2003, 22:37

Hola amigo:

Te agradezco sinceramente lo didactico que fuiste, me ha servido para aprender y eso vale mucho, ahora entiendo porqué no podía armar el script. Muchas, muchas gracias. Saludos. Oscar

caricatos · #11 (**permalink**) 14/02/2003, 03:09

Hola amigo

:

La mayoría de los contestones de estos foros somos pacientes, además han tenido que ser pacientes con nosotros para que aprendamos.

Te puedo asegurar que muchas veces nos equivocamos, pero para eso están los demás contestones.

Suerte