homepage Welcome to WebmasterWorld Guest from 54.211.180.175
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Random image without PHP
Question with Javascript and CSS
alexr86




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

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]

 

createErrorMsg




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

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...)

SethCall




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

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)
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.

alexr86




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

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.

ocallaghans




msg:1178631
 6:38 am on Jul 20, 2004 (gmt 0)

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

<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>

alexr86




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

Thank you so much! This works great.

lauriebr




msg:1178633
 3:33 pm on Aug 16, 2004 (gmt 0)

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:

<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]

lauriebr




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

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

Laurie

sparky37




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

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?

sparky37




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

Ah-ha!

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 + "')

createErrorMsg




msg:1178637
 1:52 am on Sep 6, 2004 (gmt 0)

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! ;)

sparky37




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

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.

sparky37




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

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

Makes sense now why it wouldn't work.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved