1 Reply Latest reply on Aug 30, 2008 1:56 PM by Newsgroup_User

    Linking Javascript and CSS?

    c-fqgy Level 1
      Hello,
      I have a small little script that picks an image based upond what month it is. When I was first constructing the site I used CSS to put a backgound image on the body tag. It's this image that I want to be based on what month it is. I'm wondering if its possible to link my CSS background image's placement with the image results that the Javascript gets.

      CSS:
      body {
      background-image: default.jpg;
      background-color: #FFFFFF;
      background-repeat: repeat-y;
      background-position: center top
      }

      Javascript:
      <script>
      onload=function(){
      document.images["imageOfTheMonth"].src=
      ["01.jpg",
      "02.jpg",
      "03.jpg",
      "04.jpg",
      "05.jpg",
      "06.jpg",
      "07.jpg",
      "08.jpg",
      "09.jpg",
      "10.jpg",
      "11.jpg",
      "12.jpg"][new Date().getMonth()];
      }
      </script>
      <img src="imageOfTheMonth" src="default.jpg">
      </style>


      Site Location:
      http://www3.telus.net/public/surekiss/index2.html


      If there is away to do this, I would be greatful for a lead to follow so that I can figure this out.
      Thanks!
        • 1. Re: Linking Javascript and CSS?
          Level 7
          c-fqgy,

          One way to solve this problem is to predefine 12 classes: one for each
          month:

          .month01 { background-image: january.jpg; }
          .month02 { background-image: february.jpg; }
          /* etc. */

          Then in your JS, dynamically apply the class of the current month to
          your element. That way your CSS does not need to be manipulated with JS.

          HTH,
          Randy


          > I have a small little script that picks an image based upond what month it is.
          > When I was first constructing the site I used CSS to put a backgound image on
          > the body tag. It's this image that I want to be based on what month it is. I'm
          > wondering if its possible to link my CSS background image's placement with the
          > image results that the Javascript gets.
          >
          > CSS:
          > body {
          > background-image: default.jpg;
          > background-color: #FFFFFF;
          > background-repeat: repeat-y;
          > background-position: center top
          > }
          >
          > Javascript:
          > <script>
          > onload=function(){
          > document.images["imageOfTheMonth"].src=
          > ["01.jpg",
          > "02.jpg",
          > "03.jpg",
          > "04.jpg",
          > "05.jpg",
          > "06.jpg",
          > "07.jpg",
          > "08.jpg",
          > "09.jpg",
          > "10.jpg",
          > "11.jpg",
          > "12.jpg"][new Date().getMonth()];
          > }
          > </script>
          > <img src="imageOfTheMonth" src="default.jpg">
          > </style>
          >
          >
          > Site Location:
          > http://www3.telus.net/public/surekiss/index2.html
          >
          >
          > If there is away to do this, I would be greatful for a lead to follow so that
          > I can figure this out.
          > Thanks!
          >