Comunidad de diseño web y desarrollo en internet online

Cambio aleatorio de la imagen de fondo de la página. [Javascript]

Citar            
MensajeEscrito el 19 Jul 2012 12:26 pm
He visto que un compañero publica un código PHP para cambiar dinámicamente la imagen de fondo del elemento <body>.
Aquí os traigo una versión en JavaScript que hace exactamente eso, cambiar la imagen de fondo aleatoriamente cuando se carga la página.

<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cambiar fondo de página con javascript &bull; by Alfredo González P.</title>

<script type="text/javascript">
fondos = new Array();
fondos[0] = "images/cabecera.png";
fondos[1] = "images/cabecera1.png";

// también se puede crear un array así
// var fondos = ["images/fondo.png","images/fondo1.png","images/fondo2.png"]

function fondoBody() {
var image = fondos[Math.floor(Math.random()*fondos.length)]
document.body.style.backgroundImage="url("+image+")";

}
</script>


</head>

<body onLoad="javascript:fondoBody();">
</body>
</html>

Por fr3d1_m4dr1d

87 de clabLevel

1 tutorial

 

Diseñador gráfico multimedia

chrome
Citar            
MensajeEscrito el 19 Jul 2012 03:16 pm
lo veo muy básico. podrias ampliar el tuto? dejar un link a una demo y explicar un poco más?

Por Mariux

BOFH

7761 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome
Citar            
MensajeEscrito el 19 Jul 2012 04:43 pm
Es sencillo, que no básico, para que los que no son tan PRO. Pero a la vez de sencillo, muestra en un par de líneas de código un potencial enorme, pues ilustra como cambiar una propiedad CSS de un elemento HTML, en este caso el body. Dicha técnica se puede aplicar a cualquier elemento de la misma manera, es cuestión de echarle imaginación.
Quizás, personas menos avezadas en la programación, valoren la sencillez del concepto sin más florituras, innecesarias según mi punto de vista.

Por fr3d1_m4dr1d

87 de clabLevel

1 tutorial

 

Diseñador gráfico multimedia

chrome
Citar            
MensajeEscrito el 20 Jul 2012 12:09 am

fr3d1_m4dr1d escribió:

Es sencillo, que no básico, para que los que no son tan PRO. Pero a la vez de sencillo, muestra en un par de líneas de código un potencial enorme, pues ilustra como cambiar una propiedad CSS de un elemento HTML, en este caso el body. Dicha técnica se puede aplicar a cualquier elemento de la misma manera, es cuestión de echarle imaginación.
Quizás, personas menos avezadas en la programación, valoren la sencillez del concepto sin más florituras, innecesarias según mi punto de vista.


Me refería a completar un poco mas el tutorial, así como esta no puede ir a portada porque no tiene un formato muy preciso.

Por Mariux

BOFH

7761 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome
Citar            
MensajeEscrito el 18 Ene 2013 02:31 pm
Saludos, disculpen quería saber como puedo asignar esa función a un div con un ID en vez del body si serían tan amables, es que no se nada de javascript, gracias!

Por a1989

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Ene 2013 04:46 pm

a1989 escribió:

Saludos, disculpen quería saber como puedo asignar esa función a un div con un ID en vez del body si serían tan amables, es que no se nada de javascript, gracias!


No te preocupes, es sencillo, aquí tienes la función que reemplazarías por la anterior.

function fondoDiv(argument) {
var image = fondos[Math.floor(Math.random()*fondos.length)];
var elemento = document.getElementById(argument);
elemento.style.backgroundImage="url("+image+")";
}

En la llamada a la función la llamas poniendo como argumento la ID del div, y ya está

onLoad="javascript:fondoDiv('nombredeldiv');"

Saludos,

Alfredo

Por fr3d1_m4dr1d

87 de clabLevel

1 tutorial

 

Diseñador gráfico multimedia

chrome
Citar            
MensajeEscrito el 13 May 2014 02:25 pm
puse tu funcion en una pagina de dreamweaver y nopasa nada, cambie tus nombres de foto por los mios y no pasa nada. me ayudas por favor?

Por leviatan1

1 de clabLevel



 

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.