Title: replace header image with javascripted images
Last modified: August 19, 2016

---

# replace header image with javascripted images

 *  [sd12013](https://wordpress.org/support/users/sd12013/)
 * (@sd12013)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/replace-header-image-with-javascripted-images/)
 * I’d like to replace my static header image with a rotating set of javascripted
   images based on the time of day. I already have the script and tested it on it’s
   own html page here:
    [http://www.larkinsfam.com/annieblog/wp-content/themes/babyblog-itsaboy/test.html](http://www.larkinsfam.com/annieblog/wp-content/themes/babyblog-itsaboy/test.html)
 * I’m usually pretty good at modifying the code but I’ve tried a million things
   and can’t get this to work. I tried saving the script as a separate js file but
   I’m not quite sure the proper syntax on how to call the script from the php. 
   I also tried dropping the script directly into my index file but it breaks my
   layout and doesn’t display anything any way. Any help from you code wizzes is
   greatly appreciated.
 * My WP blog address:
    [http://www.larkinsfam.com/annieblog/](http://www.larkinsfam.com/annieblog/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Thread Starter [sd12013](https://wordpress.org/support/users/sd12013/)
 * (@sd12013)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/replace-header-image-with-javascripted-images/#post-740877)
 * Does anyone read these? I’m beginning to doubt it. Am I in the wrong area or 
   something?
 *  [whooami](https://wordpress.org/support/users/whooami/)
 * (@whooami)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/replace-header-image-with-javascripted-images/#post-740878)
 * theres no magic to using js inside theme files .. you treat them the same way
   you would if they were straight HTML .. The only thing to watch out for is that
   you dont break PHP stuff, and this usually only happens unless you paste plain
   old HTML into a PHP function.
 * If you want help, beyond that, then you need to show us where you are putting
   the javascript. Looking at your site doesnt help.
 * Paste the edits you are making to header.php
 *  Thread Starter [sd12013](https://wordpress.org/support/users/sd12013/)
 * (@sd12013)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/replace-header-image-with-javascripted-images/#post-740887)
 * First, thanks for the response.
 * What am I putting in the header? I think that’s where I’m lost. I’m not sure 
   _what_ to put in my header file – what the proper syntax is to call the script
   into the place of the header image. I know I’ll have to modify the style.css 
   header class also since it already sets up the single static image. I currently
   have this script but I’m just not sure how to add it into the header:
 * <script type=”text/javascript”>
    var current= new Date() var x=current.getHours()
   if (x>=4 && x<8) { document.write(“<img src=’[http://www.skylarkstudio.net/annieblog/wp-content/themes/babyblog-itsaboy/images/header-bg_spring_sunrise.jpg’>&#8221](http://www.skylarkstudio.net/annieblog/wp-content/themes/babyblog-itsaboy/images/header-bg_spring_sunrise.jpg’>&#8221);)}
   else if (x>=8 && x<16) { document.write(“<img src=’[http://www.skylarkstudio.net/annieblog/wp-content/themes/babyblog-itsaboy/images/header-bg_spring_day.jpg’>&#8221](http://www.skylarkstudio.net/annieblog/wp-content/themes/babyblog-itsaboy/images/header-bg_spring_day.jpg’>&#8221);)}
   else if (x>=16 && x<20) { document.write(“<img src=’[http://www.skylarkstudio.net/annieblog/wp-content/themes/babyblog-itsaboy/images/header-bg_spring_dusk.jpg’>&#8221](http://www.skylarkstudio.net/annieblog/wp-content/themes/babyblog-itsaboy/images/header-bg_spring_dusk.jpg’>&#8221);)}
   else document.write(“<img src=’[http://www.skylarkstudio.net/annieblog/wp-content/themes/babyblog-itsaboy/images/header-bg_spring_night.jpg’>&#8221](http://www.skylarkstudio.net/annieblog/wp-content/themes/babyblog-itsaboy/images/header-bg_spring_night.jpg’>&#8221);)
   </script>
 * I’ve tested the script and it does exactly what I’m looking to do. Any help you
   can give me is greatly appreciated.
 * -Rob
 *  Thread Starter [sd12013](https://wordpress.org/support/users/sd12013/)
 * (@sd12013)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/replace-header-image-with-javascripted-images/#post-740906)
 * ugggh! What’s killing me is that I know I’m close and one of you guys that can
   code circles around me could look at this thing and tell me exactly how to do
   it without blinking in between sips of your mountain dew.
 * Anyone?

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘replace header image with javascripted images’ is closed to new replies.

## Tags

 * [images](https://wordpress.org/support/topic-tag/images/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * 4 replies
 * 2 participants
 * Last reply from: [sd12013](https://wordpress.org/support/users/sd12013/)
 * Last activity: [17 years, 11 months ago](https://wordpress.org/support/topic/replace-header-image-with-javascripted-images/#post-740906)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics