SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change bg img problem in firefox

    hi guys, grabbed this code from code belly, it supposed to change the background image when you click on a link. this is working fine in safari but not firefox. anyone know why?
    Code:
    <script type="text/javascript">
    <!--
    
    // Copyright 2001 by codebelly
    // Please do *not* remove this notice.
    
    var backImage = new Array(); // don't change this
    
    
    backImage[0] = "bgpics/burger.gif";
    backImage[1] = "bgpics/lasers.gif";
    backImage[2] = "bgpics/putin.gif";
    backImage[3] = "bgpics/sumo.gif";
    backImage[4] = "bgpics/space_skull.gif";
    backImage[5] = "bgpics/chickens.gif";
    backImage[6] = "bgpics/kittens.gif";
    backImage[7] = "";
    
    function changeBGImage(whichImage){
    if (document.body){
    document.body.background = backImage[whichImage];
    }
    }
    
    //-->
    </script>
    and the links to click on are set up like so:
    HTML Code:
    <div style="position:fixed; top: 120px; right:50px; background-color: #00FF00; width:125px; border:.2em solid #FF0000; text-align:right; padding-left:10px; padding-right:10px; padding-top:3px; z-index:10;">
    BACKGROUNDS
    &nbsp;  
    <a href="javascript:changeBGImage(0)">Burgers</a>
    
    <a href="javascript:changeBGImage(1)">Lasers</a>
    <a href="javascript:changeBGImage(2)">Vladimirs</a>
    
    <a href="javascript:changeBGImage(3)">Sumos</a>
    
    <a href="javascript:changeBGImage(4)">Skulls</a>
    
    <a href="javascript:changeBGImage(5)">Chickens</a>
    
    <a href="javascript:changeBGImage(6)">Kittens</a>
    
      <a href="javascript:changeBGImage(7)">Nothings</a>
    
    </div>

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change it to this:

    Code JavaScript:
    <script type="text/javascript">
    <!--
     
    var backImage = [];
    backImage[0] = "bgpics/burger.gif";
    backImage[1] = "bgpics/lasers.gif";
    backImage[2] = "bgpics/putin.gif";
    backImage[3] = "bgpics/sumo.gif";
    backImage[4] = "bgpics/space_skull.gif";
    backImage[5] = "bgpics/chickens.gif";
    backImage[6] = "bgpics/kittens.gif";
    backImage[7] = "";
     
    function changeBGImage(whichImage){
       document.getElementsByTagName('body')[0].style.backgroundImage = 'url(' + backImage[whichImage] + ')';
    }
     
    //-->
    </script>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah! thanks jimmyp. that works. if you have a second maybe you could explain what that was about. not necessary, i just have an obsessive need to understand


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •