I was looking for a way to alter the image randomly on my WordPress weblog, but as the header image is called from a CSS file, I was unsure quite how to do it.
I am unsure no more !
PhotoMatt wrote a random image script, the details of which can be viewed here.
Although I use WP, this will work for any blog that has an image called from the CSS.
I did this;
– Created a folder on the server called ‘headers’
– Into that, I uploaded several different images that would suit as a header image.
– I saved the script above as a php file (call it what you will – mine is ‘rotate.php’) and uploaded into the same ‘headers’ folder.
Now I edited the CSS file.
In WP, there is a line in #header which can be used to specify a url for the image to be loaded. This needs a light alteration:
Mine was
#header {
background-image: url(image.jpg)
and it is now
background-image: url(headers/rotate.php);
Now, when the CSS is called, the background image is chosen randomly by the script. 🙂
This is indeed a good script for rotating background images, but due to the caching methods of Mozilla and Opera, it only works in IE. (Haven’t checked the mac) Because the editing takes place in the stylesheet but doesn’t modify it FF assumes that the contents of the CSS file hasn’t been altered and serves you the cached image.
There needs to be an inline style to prevent this effect, but that is also damaging the seperation of form and content..
Any ideas where I can get the magic Matt script? I can’t seem to find it anywhere. OR, am I just missing something here?
i love ya!!!!! searching the way to insert java script into CSS for several hours on the Internet , i finally found the alternative answer here. you saved my life!
This one works on Mozilla and Opera too, and is just as simple:
http://www.alistapart.com/articles/randomizer/
What would really be useful to me is a different header image for each category. So I could have a category about my trip to cuba, let’s say, and have a header picture of Cuba up. Then it would change to a picture of Spain when someone clicks on the trip to spain category. I’ll go to the wp forums.
Re post 7:
This is really the only one I found that works on my Mac. Thanks for the link!
I am looking for a way to have random header image, that corresponds to a certain css file pulled up at the same time. In other words… I have certain images that belong to certain css files… that both need to be pulled up at the same time… but the pair is to be choosen at random… Please if you have any direction or insight… mail me. berrym15@msu.edu thank you
For see Cuba.
THX, this script works well!
Hi, sorry but, I am stuck at point 1 above .
I have blog at http://yellowfields.blogsome.com/
HOW can I ADD a folder (‘headers’) to the server ?
Anyone using Blogsome Can give a hand ?
Thank you so much
Zeb
Check this url : http://www.directkerala.com/do.....s-and.html for ASP.Net implementation of rotator.
Cheers
maybe this link can help
http://blogsome-forum.blogsome.....=8722#8722
Exactly what i need! Thanx!
Wonderful! I’ve been butting my stupid head against several metaphorical walls all afternoon trying various ways to get randomly selected pictures to show up on my blog header. Thanks to your clear explanation (and Matt’s script) it works perfectly now.
( I love being ignorant – there are so many nice surprises in life!)
Thanks for the simple write up! I followed what you did and got it to work.