Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Random image without PHP

Question with Javascript and CSS

12:00 am on Jul 20, 2004 (gmt 0)

10+ Year Member

I run a weblog (<No URLs, thanks. See TOS [WebmasterWorld.com]>) and I have multiple images that I want to randomly rotate as the masthead each time a visitor loads the page a image is selected randomly. Being that this is hosted on <snip>, I can't upload anything to their server (like a PHP script). However, being an NYU student, I have space to upload things on their server. Unfortunately, PHP isn't supported there, so I can't use any of those scripts.

Now I've found Javascripts that serve the same purpose. Though, the masthead I need to be encoded in the CSS as a background instead of as an img in the body. I am now unsure how to call this Javascript properly and I guess, validly within the CSS? Is this possible? Can anyone think of another way to have masthead images change randomly without PHP and using CSS? Thanks a ton.

[edited by: DrDoc at 2:41 am (utc) on July 20, 2004]

12:55 am on Jul 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

You can use JavaScript to alter values in a stylesheet (such as a background image). When the browser builds the the page, it reserves a place in the DOM for a stylesheets object. You can go into this object and delete, add or replace rule declarations, properties and values.

The problem is that the stylesheet object doesn't differentiate between inline, embedded, external and imported stylesheets. It reads from all these sources and creates a stylesheet object that reflects the active, or current, style settings on the page. This can make dubious work of identifying exactly where and how to reference an object in the array. If you use ONE stylehseet and nothing inline or embedded, it's a little easier.

Overall, you'd probably be better off using a JS script that picks the image and places it in the source, rather than altering the stylesheet object to change a background image. Otherwise, read up on the stylesheet object array and how to manipulate it.

Note: One thing that might make it easier is to put the rule declaration containing the background image to be randomized near the top of your CSS, perhaps right after the body styles. This will make it object [0] or [1] in the array and simplify alterations.

Note2: There are MANY very skilled JS scripters in the JvaScript forum, and some of them very rarely venture over here to CSS-Land. I'd advise you to take this question to them for further guidance. (Not that you won't get many well-informed opinions here...)

1:25 am on Jul 20, 2004 (gmt 0)

10+ Year Member

This solution does alter the css, but not of the style definitions contained in the document.stylesheets array.

Step 1: Make an array of background-image src's.

Step 2: Then, on onload of body, randomly choose a one src from the array, and make that the background-image for the element you want.

<script language="JavaScript" type="text/javascript">
var backgroundSrcs = new Array(2)

function pickimage()
document.getElementById("bodyElement").style.backgroundImage = "url('" + backgroundSrcs[0] + "')";


<body id="bodyElement" onload="pickimage()">

Note: I didn't implement the random picking of the image, obviously, though that should be pretty easy to do. I can't recall a random number function for js atm.

Also, move the id="bodyElement" to whatever element you want, and voila, you're done.

4:33 am on Jul 20, 2004 (gmt 0)

10+ Year Member

I'm sorry to say that I'm not an expert as many of you appear to be. I simply know rudimentary CSS and HTML. I don't know Javascript, PHP, DOM, or Perl. Sorry. So I completely missed whatever you guys were saying. The Javascript I planned on using I found somewhere else on the internet, I don't know how to write my own. Can you please explain for the dumber of us? Thanks.
6:38 am on Jul 20, 2004 (gmt 0)

10+ Year Member

I've edited Sethcall's script and got it working. Just edit the list of images and make sure you add id="masthead" to your masthead table/div tag

<title>Random Masthead Background</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript" type="text/javascript">

//Edit this line to list all of your background images
var backgroundSrcs = new Array("ss-001.gif","ss-002.gif","ss-003.gif","ss-004.gif")

function pickimage()
//This line picks an image at random from the list you entered above
var bgimage=backgroundSrcs[(Math.round(Math.random()*(backgroundSrcs.length-1)))]

//This line applies the background image to your masthead
document.getElementById("masthead").style.backgroundImage = "url('" + bgimage + "')";
<body onload="pickimage()">
I've used a div tag for the masthead but you could use a table or paragraph if you wish.
Just make sure that you add the id="masthead" part.
<div id="masthead">
<p>Your Masthead Goes Here</p>
<div>The rest of your page goes here</div>

11:41 pm on Jul 20, 2004 (gmt 0)

10+ Year Member

Thank you so much! This works great.
3:33 pm on Aug 16, 2004 (gmt 0)

10+ Year Member

I'm trying to use this code and it doesn't seem to be working.

Here's the page I posted:

<No URLs and site reviews, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

It's exactly the code you supplied, except I'm pointing to my background images.

Help! Ultimately I'm trying to rotate the background image on this page:


I have to use code similar to what you laid out because I can't use any scripting other than JavaScript/CSS on the main MIT server. And I have to use a rotating background image rather than a layer with an image because Netscape won't handle z-index correctly so that I can layer the rollovers on top. So this code is my only hope! Can you help me get it working?


[edited by: DrDoc at 5:13 pm (utc) on Aug. 16, 2004]
[edit reason] Welcome to WebmasterWorld! [WebmasterWorld.com] [/edit]

6:24 pm on Aug 23, 2004 (gmt 0)

10+ Year Member

Sorry, didn't realize I couldn't post an actual page. I figured it out on my own, thanks though!


11:12 pm on Sep 5, 2004 (gmt 0)

10+ Year Member

I'm trying to figure this out, I can't get either script to work as posted here. I've made no changes as I can't even get either one to work as posted.

I've even made images that are exactly the same name to no avail. :shrug:

Any ideas?

12:07 am on Sep 6, 2004 (gmt 0)

10+ Year Member


For the next confused sole who wanders through on a search:

This line:

document.getElementById("masthead").style.backgroundimage = "url('" + bgimage + "')

Should instead be:

document.getElementById("masthead").style.background = "url('" + bgimage + "')
1:52 am on Sep 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

This line:

document.getElementById("masthead").style.backgroundimage = "url('" + bgimage + "')

Should instead be:

document.getElementById("masthead").style.background = "url('" + bgimage + "')

Only one problem with this solution, sparky. If the 'masthead' element has background settings other than this image (a color, for example) your script will overwrite it with only the background-image and the color setting will be lost.

The 'official' solution should be this, with the changed/different part in bold...

document.getElementById("masthead").style.backgroundImage = "url('" + bgimage + "')

Here's a breif explanation: CSS styles contain many hyphenated properties (font-size, margin-left and, of course, background-image) but in javascript, the minus signs is just that, a minus operator. So in order to express hyphenated CSS properties in a line of JS code, you have to use the "interCaps" technique, where you capitalize the first letter in the second word (and thrid and fourth, if applicable). Thus, fontSize, marginLeft, and backgroundImage.

Use this option and you remove the risk of unintentionally erasing other properties from the style array.

I'll also note that had this question been posted in the javascript forum these errors would have been corrected within minutes, not months! ;)

2:14 am on Sep 7, 2004 (gmt 0)

10+ Year Member

Actually this is what I ended up with in the js file:

document.getElementById("banner").style.background = "url('" + bgimage + "') left no-repeat #fffff0";

Sets the image on the left, no repeating and the background color too. I have the #banner size and padding specified in the external css sheet.

2:15 am on Sep 7, 2004 (gmt 0)

10+ Year Member

Oh, thanks for the quick javascript lesson too. :D

Makes sense now why it wouldn't work.


Featured Threads

Hot Threads This Week

Hot Threads This Month