...
PDA

Randomize Background Image

dcdemon813
05-08-2008, 08:11 AM
Im making a modeling website for my friend. I would like to display an image on the homepage as a background... I just would like to do multiple. every time a visitor comes to the page, i would like to have a different background image appear. I did find the code in this forum here: http://www.codingforums.com/showthread.php?t=59581

But here is my dilemma. I havent produced any kind of webpage in a couple years and i am a bit rusty...
I did find a PHP code that milla jonovichs website using very well. Im using Adobe golive, photoshop, and dreamweaver. (golive and dreamweaver have things that are easier for me to use.) the PHP code doesnt do anything... it doesnt produce errors... just doesnt produce anything. and the javascript... does work. I believe the reason is user error.. lol. Can anyone help me out?

here is my codeing:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Mywebsite</title>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>


<body bgcolor="#b5bcc5" onLoad="MM_preloadImages('images/BioBUTTONup.png','images/GalleryBUTTONup.png','images/ContactBUTTONup.png')">
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" background=":mad:" cool gridx="10" gridy="10" height="534" showgridx showgridy usegridx usegridy>
<tr height="10">
<td width="799" height="10" colspan="5"></td>
<td width="1" height="10"><spacer type="block" width="1" height="10"></td>
</tr>
<tr height="22">
<td width="10" height="523" rowspan="2"></td>
<td width="390" height="523" rowspan="2" valign="top" align="left" xpos="10"><img src="images/HomebuttonUP.png" alt="" height="65" width="260" border="0"></td>
<td width="399" height="22" colspan="3"></td>
<td width="1" height="22"><spacer type="block" width="1" height="22"></td>
</tr>
<tr height="501">
<td width="144" height="501" valign="top" align="left" xpos="400"><a href="biography.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Biography','','images/BioBUTTONup.png',1)"><img src="images/BioBUTTON.png" name="Biography" width="110" height="35" border="0"></a></td>
<td width="112" height="501" valign="top" align="left" xpos="544"><a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','images/GalleryBUTTONup.png',1)"><img src="images/GalleryBUTTON.png" name="Gallery" width="80" height="35" border="0"></a></td>
<td width="143" height="501" valign="top" align="left" xpos="656"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/ContactBUTTONup.png',1)"><img src="images/ContactBUTTON.png" name="Contact" width="80" height="35" border="0"></a></td>
<td width="1" height="501"><spacer type="block" width="1" height="501"></td>
</tr>
<tr height="1" cntrlrow>
<td width="10" height="1"><spacer type="block" width="10" height="1"></td>
<td width="390" height="1"><spacer type="block" width="390" height="1"></td>
<td width="144" height="1"><spacer type="block" width="144" height="1"></td>
<td width="112" height="1"><spacer type="block" width="112" height="1"></td>
<td width="143" height="1"><spacer type="block" width="143" height="1"></td>
<td width="1" height="1"></td>
</tr>
</table>
<p></p>
</body>

</html>



i did place a mad face where i link a single picture... any ideas? please?!?

i am also aware i asked in the HTML n CSS part, but im hoping there may be HTML code for what i want to achieve?
rangana
05-08-2008, 09:33 AM
You might find this script useful :)

<script type="text/javascript">
/*************************************/

* Script by Raymond Angana
* rangana in Codingforums
* Created May 8 2008

/*************************************/

/********************************************* edit these values to suit *********************************************/
var bg1='http://www.digitalphotoguides.com/tuts/background-removal.jpg';
var bg2='http://www.gmushrooms.com/Posters/LClassicApBlk.jpg';
var bg3='http://www.gmushrooms.com/Posters/LModernApWht.jpg';
var bg4='http://3danimation.e-spaces.com/backgrounds/hd_background_american_flag.jpg';
var bg5='http://www1.istockphoto.com/file_thumbview_approve/5375378/2/istockphoto_5375378_abstract_starburst_background.jpg';
var bg6='http://www.graphicsarcade.com/backgrounds/dark/dark_background_11.gif';

/**************************************************************************************************** *****************/

var randBG=[bg1,bg2,bg3,bg4,bg5,bg6]; // Depend on the number of your background images.
window.onload=function() {
num=Math.floor(Math.random()*randBG.length);
document.body.style.background='url('+randBG[num]+')';
}
</script>
effpeetee
05-08-2008, 09:37 AM
This may be of interest too.
It allows for captions as well.
It will need modifying for your purpose. Use f5 to see it work.

http://exitfegs.co.uk/aaind.html

Frank
dcdemon813
05-08-2008, 09:57 AM
I tried the script you showed me... but i just get a black window... yup. how can i modify the script i posted? im not too good at coding... i use adobe! lol. Thanks for your help, The both of ya.
effpeetee
05-08-2008, 10:29 AM
This works for me. Just change the images to suit you.

I can't help you with your code. I do not do tables.

Frank

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Enter_Title_Here</title>
</head>
<body>
<script type="text/javascript">
var bg1='11.jpg';
var bg2='12.jpg';
var bg3='13.jpg';
var bg4='14.jpg';
var bg5='14.jpg';
var bg6='15.jpg';


var randBG=[bg1,bg2,bg3,bg4,bg5,bg6]; // Depend on the number of your background images.
window.onload=function() {
num=Math.floor(Math.random()*randBG.length);
document.body.style.background='url('+randBG[num]+')';
}
</script>
</body>
</html>
heroprotagonist
08-23-2008, 09:03 AM
This works for me. Just change the images to suit you.

I can't help you with your code. I do not do tables.

Frank

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Enter_Title_Here</title>
</head>
<body>
<script type="text/javascript">
var bg1='11.jpg';
var bg2='12.jpg';
var bg3='13.jpg';
var bg4='14.jpg';
var bg5='14.jpg';
var bg6='15.jpg';


var randBG=[bg1,bg2,bg3,bg4,bg5,bg6]; // Depend on the number of your background images.
window.onload=function() {
num=Math.floor(Math.random()*randBG.length);
document.body.style.background='url('+randBG[num]+')';
}
</script>
</body>
</html>

Hi! I'm not very good at coding, but this bit of code is exactly what I need! I'm wondering though, what I should do if I don't want the background images to repeat in a pattern across the page? I know how to prevent that normally, but not when I'm using this code. Any solutions would be very much appreciated!
BabyJack
08-23-2008, 09:07 AM
<SCRIPT LANGUAGE="JAVASCRIPT">
<--
var bgNum = Math.round(Math.random() * 5)

bgSel = new Array(6);
bgSel[1] = "image2.gif";
bgSel[2] = "image3.gif";
bgSel[3] = "image4.gif";
bgSel[4] = "image5.gif";
bgSel[5] = "image6.gif";
var base = bgSel[bgNum];

//-->
</SCRIPT>
</HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
<--
document.write("<BODY BACKGROUND='" + base + "'>");
//-->
</SCRIPT>

Easily done wiith a bit of JavaScript magic! :)
rangana
08-23-2008, 09:17 AM
@BabyJack,
background is a deprecated attribute (http://www.codehelp.co.uk/html/deprecated.html) as well as document.write() and the language attribute.

@heroprotagonist,

Basing on frank's code, see if adding highlighted helps:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Enter_Title_Here</title>
</head>
<body>
<script type="text/javascript">
var bg1='11.jpg';
var bg2='12.jpg';
var bg3='13.jpg';
var bg4='14.jpg';
var bg5='14.jpg';
var bg6='15.jpg';


var randBG=[bg1,bg2,bg3,bg4,bg5,bg6]; // Depend on the number of your background images.
window.onload=function() {
num=Math.floor(Math.random()*randBG.length);
document.body.style.background='url('+randBG[num]+') no-repeat';
}
</script>
</body>
</html>
heroprotagonist
08-23-2008, 09:36 AM
@rangana

That's perfect! Thanks!
different
11-24-2008, 04:05 PM
Thanks for the great script, rangana!

How do I make it so that the default background is set to the color black? This is in regards to the script with no-repeat.

Right now it nullifies my CSS which told the page to have a black background color. As soon as I put in the script it defaults to white.
rangana
11-25-2008, 12:53 AM
See if adding highlighted helps:

window.onload=function() {
num=Math.floor(Math.random()*randBG.length);
document.body.style.background='#000 url('+randBG[num]+') no-repeat';
}
different
11-25-2008, 11:12 AM
You are amazing. Thank you so much!
VIPStephan
11-25-2008, 05:35 PM
OK, before any more questions about the background position or attachment are arising, here’s a quick hint:

Basically this line:
document.body.style.background='#000 url('+randBG[num]+') no-repeat'
does the same as if you were writing

body {background: #000 url(path_to_backgroundImage) no-repeat;}

in your CSS file. The only difference is that in the JavaScript the image path is replaced with a variable (you could do the same with the background color, for example) and the JS is overriding the external CSS. So, you can just modify the CSS string in the JavaScript to your needs as you would do in the CSS normally. For example if you were writing:

body {background: #000 url(path_to_backgroundImage) top left no-repeat fixed;}

which comes down to:

background color: black
background image: [path]
background position: top left
background repeat: no repeat
background attachment: fixed (that means the image doesn’t move if you scroll the page)

you can write it the same way in the JavaScript with the only exception that the background image path is the above mentioned variable:
document.body.style.background='#000 url('+randBG[num]+') top left no-repeat fixed'
owt200x
11-25-2008, 07:02 PM
Name your background images in order, say bg1.gif, bg2.gif etc.
Add this to your php loading code at the top of your page,
the 1,5 is how many background images you have, start at 1 end at 5.

<?php $num = rand(1,5); ?>


add this to your body code

<body background="images/bg<?php echo $num; ?>.gif">
artasigaud
07-18-2010, 02:33 AM
Hello, thanks for your code, it works!!
But I would like to put the picture in the center of the page with automatic adjstment and not in the left up corner.
How can I do that.

Thanks o lot.

Art.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum