Transitar color de fondo - Gradientes (de Caricatos)

sergi_climent · #1 (**permalink**) 30/01/2007, 05:36

Hola,
estoy intentando usar el "transitador de Caricatos"

solo me sale una duda...
-para q el difuminado del color siempre ocupara toda la pantalla? es decir, aunque no este llena del todo q solo haya un titulo, q esta tambien se viera toda difuminada, como seria?

gracias de antemano!

saludos

caricatos · #2 (**permalink**) 31/01/2007, 01:40

Hola:

Gracias por usar el sistema.

Si he entendido la pregunta, la respuesta es que dependes de javascript para que puedas llenar toda la página con un degradado... y en vez de poner una imagen jpg de fondo del body tendría que ser un script (en este caso php) con parámetros:

document.body,style.backgroundImage = "url(.../grafiantesV.php?color1=000000&color2=FFFFFF&altura =" + document.body.offsetHeight;

En la página que genera la imagen de fondo: Gradientes (php + librerías GD) al "finalizar" se muestra el código para incrustar en la página, y también hay un enlace para bajar los ficheros php, para poderlos usar en tu propio servidor.

Las páginas que no usan javascript suelen poner el mismo color de fondo del body (o elemento al que se aplica el degradado) igual al segundo color del degradado.

Saludos

sergi_climent · #3 (**permalink**) 31/01/2007, 01:47

buenos dias...
mirare lo q me has dicho a ver si soy capaz de sacarlo! sino ya te comentaria la duda mas concretamente....

Cita:

Iniciado por caricatos

Hola:
Gracias por usar el sistema.

gracias a ti por crearlo!

saludos

sergi_climent · #4 (**permalink**) 31/01/2007, 02:00

hola de nuevo...
hay una cosa q no entiendo.. me he estado mirando el link q me has puesto, pero la funcion inicio va sobre una capa (div principal) entonces este div tiene q tener unas proporciones para q ocupe la pagina, lo q intento hacer es q el fondo de pantalla siempre sea difuminado, indeferentemente del tamaño de la pantalla, de la cantidad de datos q pueda mostrar... no ser como si fuera un color de fondo del body... quizas este expicado pero no acabo de verlo... a ver si me puedes orientar un poquito mas...

gracias de antemano,

saludos

caricatos · #5 (**permalink**) 31/01/2007, 02:16

Hola:

Es que para saber el tamaño del body dependes de javascript (document.body.offsetWidth/offsetHeight)... y el body tiene que estar cargado (<body onload=""...>) a no ser que lo acotes con estilos, pero en este caso tendrías que estudiar bien los estilos que vas a poner (width/height/overflow/background-attachment...) y si se excede de cierto tamaño deberías tener un scroll que no creo adecuado.

En el artículo puedes ver el código que se genera al pinchar en los botones que hay a pie de página (con degradados):

Código:

<script type="text/javascript">
function gradiente(color1, color2)	{
	elemento = document.body;
	altura = elemento.offsetHeight;
	var fondo = "URL(../scripts/gradientesV.php?altura=";
	fondo += altura + "&color1=" + color1 + "&color2=" + color2 + ")";
	elemento.style.backgroundImage = fondo;
	elemento.style.backgroundPosition = "top";
	elemento.style.backgroundRepeat = "repeat-x";

}
</script>

Un apunte que no he considerado es que habría que llamar a este script también en el redimensionado:
(<body onresize ...>)

Saludos

sergi_climent · #6 (**permalink**) 31/01/2007, 06:39

hola de nuevo,
tengo una duda, a ver, trabajo con php + ajax, y tengo un menu horizontal en la parte superior de la pagina principal, al clickar encima de una opcion de menu el div q hay debajo se actualiza con la inf de la pagina, bueno pues lo q me pasa es con ie, si voy acceciendo en las diferentes paginas, lo q es el difuminar se va prolongando segun el tamaño de la pagina, en firefox no, es decir, solo se ve el difuminar en el tamaño original de a pagina principal...
no ser si me explicado bien. a ver si me podeix echar un cable...

PD: no he conseguido cambiar todo el fondo de pantalla!
con esto ya tendria q cojer el tamaño de la pagina no?

Código:

elemento = document.body;
altura = elemento.clientHeight;

o el body solo ocupa la pequeña tabla q tengo puesta...
si es asi, aun no ser como puedo llenar el fondo de pantalla...
me da = usar javascript, php o lo q sea...

EDITADO: codigo principal de mi pagina default.php

Código HTML:

<?
require("../aut_verifica.inc.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script language="javascript" src="js/funcions.js"></script>
<script language="javascript" src="js/calendari.js"></script>
<script language="javascript" src="js/isiajax.js"></script>
<script language="javascript" src="js/isixml.js"></script>
</head>
<body onLoad="myajax = new isiAJAX('main', 'cargador'); gradiente('0000FF', 'FFFFFF');" onResize="gradiente('0000FF', 'FFFFFF')">
<!--Imatge q es veu quan carrega una pagina o consulta-->
<div id="cargador">
	<img src="img/loading.gif" alt="load" width="16" height="16"> &nbsp; 
	<a href= "javascript:myajax.Cancel();">
	<img border="0" src="img/cancelar.gif" alt="cancel" width="97" height="16"></a>
</div>
<div id="principal">
<table width="100%">
<tr>
<td>
<!--Menu Principal --> 
<div class="chromestyle" id="chromemenu">
	<ul>
		<li><a href="/maquines/default.php">Home</a></li>
		<li><a href="#" rel="dropmenu1">Maquinas</a></li>
		<li><a href="#" rel="dropmenu2">Averias</a></li>
		<li><a href="#" rel="dropmenu3">Actividades</a></li>
		<li><a href="#" rel="dropmenu4">Rapport</a></li>
		<li><a href="#" rel="dropmenu5">Configuracion</a></li>
	</ul>
</div>
<!--1er Menu desplegable --> 
<div id="dropmenu1" class="dropmenudiv">
	<a href="#">Nueva</a>
	<a href="#">Consulta1</a>
	<a href="#">Consulta2</a>	
	<a href="#">Consulta3</a>	
</div>
<!--2on Menu desplegable --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
	<a href="#">Nueva</a>
	<a href="#">Consulta1</a>
	<a href="#">Consulta2</a>	
	<a href="#">Consulta3</a>
</div>
<!--3er Menu desplegable --> 
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
	<a href="#">Nueva</a>
	<a href="#">Consulta1</a>
	<a href="#">Consulta2</a>	
	<a href="#">Consulta3</a>
</div>
<!--4art Menu desplegable --> 
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
	<a href="#rapport/default.php" onClick="myajax.Link(this.href, 'main')">Nuevo</a>
	<a href="#">Consulta1</a>
	<a href="#">Consulta2</a>	
	<a href="#">Consulta3</a>
</div>
<!--5e Menu desplegable --> 
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
	<a href="#">Empresa</a>
	<a href="#">Secciones</a>
	<a href="#">Tipo Maquina</a>
	<a href="#">Fabricante</a>
	<a href="#">Marca</a>
	<a href="#">Modelo</a>
	<a href="#">Usuarios</a>
</div>
<script type="text/javascript">
	cssdropdown.startchrome("chromemenu")
</script>
</td>
</tr>
<tr>
<td><div id="main"><img src="" border="0"></div></td>
</tr>
</table>
</div>
</body>
</html>

y luego tengo un archivo para la funciones de php y otro con las de javascript.
Js:

Código PHP:

  function gradiente(color1, color2)    {

    elemento = document.body;

    altura = elemento.clientHeight;

    var fondo = "URL(funcions/funcions.php?altura=";

    fondo += altura + "&color1=" + color1 + "&color2=" + color2 + ")";

    elemento.style.backgroundImage = fondo;

    elemento.style.backgroundPosition = "top";

    elemento.style.backgroundRepeat = "repeat-x";

}

PHP:

Código PHP:

  //DIFUMINAR PAGINA

header("Content-Type: image/png");

 
function elColor($color)    {

    $red = 256 * 256;

    $green = 256;

    $blue = 1;

    return ($red * $color[0]) + ($green * $color[1]) + ($blue * $color[2]);

}

 
function losColores($arrayColores)    {

    $devolver = array();

    for ($i = 0; $i < count($arrayColores); $i ++)

        $devolver[$i] = elColor($arrayColores[$i]);

    return $devolver;

}

 
function desglose($fondo)    {

    return array(hexdec($fondo[1]),hexdec($fondo[2]),hexdec($fondo[3]));

}

 
function rgbColor($fondo)    {

    $red = 100;

    $green = 100;

    $blue = 100;

    if( eregi( "([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $fondo, $retornar ) )

        return $retornar;

    else

        return array($fondo, $red, $green, $blue);

}

 
function transitar($color1, $color2, $pasos) {

    $devolver = array();

    $pasos--;

    $devolver[0] = desglose(rgbColor($color1));

    $devolver[$pasos] = desglose(rgbColor($color2));

    $rIni = $devolver[0][0];

    $gIni = $devolver[0][1];

    $bIni = $devolver[0][2];

 
    $rFin = $devolver[$pasos][0];

    $gFin = $devolver[$pasos][1];

    $bFin = $devolver[$pasos][2];

 
    $rMed = ($rFin - $rIni) / $pasos;

    $gMed = ($gFin - $gIni) / $pasos;

    $bMed = ($bFin - $bIni) / $pasos;

 
    for ($i = 1; $i < $pasos; $i ++)    {

        $devolver[$i] = array($rIni + round($rMed * $i), $gIni + round($gMed * $i), $bIni + round($bMed * $i));

    }

    return losColores($devolver);

}

 
if (isset($_GET["altura"])) $altura = $_GET["altura"];

else $altura = 2;

$anchura = 1;

if (isset($_GET["color1"])) $color1 = $_GET["color1"];

else $color1 = "000123";

if (isset($_GET["color2"])) $color2 = $_GET["color2"];

else $color2 = "ffabcd";

 
$fondo1 = desglose(rgbColor($color1));

$fondo2 = desglose(rgbColor($color2));

$transito = transitar($color1, $color2, $altura);

 
//$destino = imagecreate($anchura, $altura);

$destino = imageCreateTrueColor($anchura, $altura);

for ($i = 0; $i < count($transito); $i ++)

    imagesetpixel($destino, 0, $i, $transito[$i]);

@imagepng($destino);

imagedestroy($destino);

saludos y gracias de antemano

sergi_climent · #7 (**permalink**) 31/01/2007, 11:37

ok... ya lo he conseguido... al final he optado por un div con un tamaño X y ya esta!

gracias por vuestra ayuda!

saludos

caricatos · #8 (**permalink**) 31/01/2007, 12:21

Hola:

Lo que pasa es que el degradado es una imagen de un tamaño determinado, y si ese tamaño cambia, hay que cambiar el fondo con la misma imagen pero distintos parámetros... basicamente se cambia el tamaño cuando se terminan de cargar las imágenes, pero si originalmente se asignan los estilos o atributos width, height o se espera a que estén todas las imágenes cargadas (con una precarga)... y otro motivo es el resize de la página y se detecta con body onresize... pero además habría que contemplar las actualizaciones con ajax o cualquier modificacion del tamaño de forma dinámica... la verdad es que son tantas cosas, que una buena idea sería poner el fondo del body del mismo color del final del degradado.

Saludos

sergi_climent · #9 (**permalink**) 01/02/2007, 10:53

Cita:

Iniciado por caricatos

Hola:
una buena idea sería poner el fondo del body del mismo color del final del degradado.
Saludos

jajajajaja

es lo q he hecho! y la verdad q como el degradado empieza de clarito a oscuro... pues acaba todo del mismo color y fuera problemas! la parte principal q es la q me importaba ya tiene su degrada bonito de X px luego pues ya si se alarga la cosa pues del mismo color!

saludos