WooHoo! I finally figured out how to change the header image based on the time of day too! This has been so much fun, I love learning new things, especially when I can figure out how it works and how to do it myself. :)
Try changing the time on your computer clock to see the different backgrounds, here are the times:
- 6am
- 9am
- 12pm
- 3pm
- 6pm
- 8pm
- 10am
For those who would like to know what I did:
I wanted to make the background image AND the header image change based on the time of the day, I was able to make the background change with no problems, it is done with javascript but I didn't know exactly how to make the header image change too, I finally figured out that I had to make a second javascript for the header image, I was trying to make it all in one set of code, I'm sure there is a way to do it, but I couldn't figure it out, so I just made a second js code for the header image and it worked.
Now if I had an image for the header using the upload feature on Blogger, it would override my image I was trying to add via javascript, if I had no image there, then the space where the header image would go shrinks up (because it thinks nothing is going there) and your header background image gets covered up or just doesn't show.
What I did was to do was make a transparent image (gif) that was the same size as my header image, that's easily done with Photoshop, I uploaded that in the layout/page elements section, that acted like a place card to hold the header space open, but allowed anything that was placed in the header background to show through.
I uploaded all of these images and the javascript code to http://pages.google.com/, this is a free place where you can make webpages, they host the images for free, it's more private then these image hosting sites, and I don't think the image hosting sites will allow you to upload anything but images, no html, no javascript..., anyhoo, with everything there, I can call on my images and javascript from there. Using Photoshop, I created 7 backgrounds, to save on bandwidth, I made the images 100 px wide by 1096 px tall, I made the images repeat side to side but not up and down, and I made them fixed, that means as you scroll down, the background image stays in place, it does not scroll. You can rightclick on the background image (on the side of the page) and choose "view background image" and you will see exactly what the background image looks like.
Next I made 7 header background images, the text, black mountain and my image stays the same, but the background behind it is different in each image., these do not need to repeat or be fixed, it is exactly the same dimensions as the transparent gif so it fits exactly in the header space.
That's all I am going to explain for now, if anyone wants more info, just email me and I'll be more than happy to explain further.
.
.
.
.
.
.
.
Posts
