AYuda Con fondo aleatorio

lukkifrag · #1 (**permalink**) 29/01/2011, 18:07

alguien me puede decir que script puedo usar para que cada vez que toke f5 cambie el fondo de mi pagina porque eh buscado pero no encuentro alguna solucion

aki dejo el html

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin t&iacute;tulo</title>

<link href="stylo.css" rel="stylesheet" type="text/css" />

</head>

 
 
 
 
 
<body>

<p><img id="Bg"  src="3.jpg"/></p>

<div id="Site">

<div id="menu">

</div>

 
</div>

</div>

 
 
</body>

</html>

y aki dejo el css

Código PHP:

  /* CSS Document */

html,body{margin:0;padding:0;height:100%;overflow:hidden;}

#Bg,#Site{

    position:absolute;

    z-index:-1;

    width:100%;

    height:100%;

    left: -1px;

    top: -2px;

}

#Site{z-index:1;overflow:auto;color:#fff;}

#Content{width:800px;margin:auto;}    

#menu {float:right; background-image:url(fmenu.png); background-repeat: no-repeat; height:150px; width:300px; margin-top:200px; margin-right:10px;}

desde ya muchas gracias

gcrlink · #2 (**permalink**) 29/01/2011, 20:59

Saludos...

Intenta en

http://www.forosdelweb.com/f13/fondos-aleatorios-para-mi-web-como-ayuda-486952/

Hay aparece un códgio que puede funcionarte y fue tratado en este foro.

lukkifrag · #3 (**permalink**) 29/01/2011, 21:52

me podrias sitar un ejemplo con mi codigo porque no eh entendido bien como modificar

gcrlink · #4 (**permalink**) 29/01/2011, 23:03

Cita:

Iniciado por lukkifrag

me podrias sitar un ejemplo con mi codigo porque no eh entendido bien como modificar

Hola... el Código que presenta sirguy en el post es sencillo de utilizar. Sólo tienes que copiarlo tal cual está en la cabecera de tu código HTML, o sea entre las etiquetas <head></head> de la siguiente manera:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="stylo.css" rel="stylesheet" type="text/css" />
 
 
<!-- INICIO DEL CÓDIGO -->
 
<script type="text/javascript">
<!--
/*Random Background Image-
By JavaScript Kit (www.javascriptkit.com)
More free JavaScripts here!
*/
 
var backgr1="../clip/backgr4.jpg"
var backgr2="../clip/backgr17.jpg"
var backgr3="../clip/backgr13.jpg"
 
var cur=Math.round(6*Math.random())
if (cur<=1)
backgr=backgr1
else if (cur<=4)
backgr=backgr2
else
backgr=backgr3
document.write('<body background="'+backgr+'" bgcolor="#FFFFFF">')
// -->
</script>
 
<!-- FIN DEL CÓDIGO -->
 
 
</head>
 
<body>
 
</body>
</html>

Luego debes sustituir el valor de cada una de las variables (lo que está en verde) var backgr1="../clip/backgr4.jpg" por la ruta de la imágen que quieras que se muestre cada vez que reinicias la página con F5. Puedes incluir el número de imágenes o fondos que desees. Sólo debes incluir la misma variable cambiando el número que tiene al final por EJ.

Código:

var backgr1 = mi images.png
var backgr2 = mi images.png
var backgr3 = mi images.png
var backgr4 = mi images.png
var backgr5 = mi images.png
var backgr6 = mi images.png

etc...

En el ejemplo que te pongo te borré el código que habías escrito entre <body></body> porque para que este script funcione no hacía falta. Entendiendo que lo que deseas es que cada vez que el usuario visite la página se vea un fondo diferente.

Espero te funcione.

lukkifrag · #5 (**permalink**) 30/01/2011, 08:24

perfecto ahora mismo lo estoy probando y te comento que tal me ha ido

lukkifrag · #6 (**permalink**) 30/01/2011, 09:02

me ha funcionado pero no logro poner mas de 3 images , me podrias decir como poner mas ? por favor

_cronos2 · #7 (**permalink**) 30/01/2011, 09:29

Sinceramente, creo que ese código es más bien poco útil. Prueba este:

Código Javascript:

Ver originalvar fondos = ['img1.jpg', 'img2.gif', 'img3.png']; // Aquí pon la url de todos los fondos
var rnd = Math.floor(Math.random()*fondos.length);
document.body.style.backgroundImage = fondos[rnd];

Saludos (:

lukkifrag · #8 (**permalink**) 30/01/2011, 10:11

no lo he podido editar porque me dice enlace no valido asi que nuevante respondo

eh probado tu codigo pero no me ha funcionado , me puedes decir cual es mi error ?

aka dejo mi html

Código PHP:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin t&iacute;tulo</title>

<link href="stylo.css" rel="stylesheet" type="text/css" />

</head>

<!-- INICIO DEL CÓDIGO -->

 

 
<script type="text/javascript">

var fondos = ['/paisajes/1.jpg', 'paisajes/2.jpg', 'paisajes/3.jpg', 'paisajes/4.jpg', 'paisajes/5.jpg', 'paisajes/6.jpg', 'paisajes/7.jpg', 'paisajes/8.jpg']; 

var rnd = Math.floor(Math.random()*fondos.length);

document.body.style.backgroundImage = fondos[rnd];

 
</script> 

 
 
 
 
 
 
<body>

 
 
<div id="Site">

<div id="Content">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scras, and more recently with desktop publishing software like Aldus PageMaker includrinting and typesetting industry. Lorem Ipsum has been the industry's standard dummy ecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</div>

<div id="menu">

 
 
 
</div>

</div>

 
 
</body>

</html>

_cronos2 · #9 (**permalink**) 30/01/2011, 10:31

Mueve el script dentro del body.
Saludos (:

lukkifrag · #10 (**permalink**) 30/01/2011, 11:20

sige sin funcionar ...

_cronos2 · #11 (**permalink**) 30/01/2011, 11:34

Ahora sí funciona, me dejé una parte de código XD

Código Javascript:

Ver originaldocument.body.style.backgroundImage = 'url('+fondos[rnd]+')';

Saludos (:

lukkifrag · #12 (**permalink**) 30/01/2011, 11:46

ahora se muchas gracias por la ayuda recibidia