Forum Moderators: not2easy
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]
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...)
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)
backgroundSrcs[0]="image1.jpg";
backgroundSrcs[1]="image2.jpg";function pickimage()
{
document.getElementById("bodyElement").style.backgroundImage = "url('" + backgroundSrcs[0] + "')";
}</script>
<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.
<html>
<head>
<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 + "')";
}
</script>
</head>
<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>
<div>The rest of your page goes here</div>
</body>
</html>
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:
<snip>
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?
Laurie
[edited by: DrDoc at 5:13 pm (utc) on Aug. 16, 2004]
[edit reason] Welcome to WebmasterWorld! [WebmasterWorld.com] [/edit]
Laurie
I've even made images that are exactly the same name to no avail. :shrug:
Any ideas?
For the next confused sole who wanders through on a search:
This line:
document.getElementById("masthead").style.backgroundimage = "url('" + bgimage + "')
document.getElementById("masthead").style.background = "url('" + bgimage + "')
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! ;)
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.
Makes sense now why it wouldn't work.
