SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast Dromenail's Avatar
    Join Date
    Nov 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    this doesn't work..

    ok. i'm trying to make a header that can be changed by the clicking of a button. so i made this code to try and achieve that. for some reason it doesn't work. i'm not particularly skilled at javascript so i can't spot any errors that might be obvious to other people.


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Site</title>
    <script>
    var backImage = new Array();
    backImage[0] = "background: url(img/headero.gif)";
    backImage[1] = "background: url(img/headerb.gif)";
    backImage[2] = "background: url(img/headerg.gif)";
    function changeBGImage(whichImage){
    if (document.body.getElementById('headerbar').style = "background: url(img/headerg.gif)"){
    document.body.getElementById('headerbar').style = backImage[whichImage];
    }
    }
    </script>
    <style>
    body {
    margin: 0;
    background: url(img/newbg.png);
    }
    #headerbar {
    width: 879px;
    height: 52px;
    float: left;
    margin-top: 20px;
    }
    .hbpadding {
    padding-left: 700px;
    padding-top: 13px
    }
    .hbbuttonspacer {
    width: 5px;
    }
    </style>
    </head>
    <body>
    <div id="headerbar" style="background: url(img/headerg.gif)">
    	<div class="hbpadding">
    		<a href="#" onclick="changeBGImage(0)"><img id="obutton" src="img/obutton_off.gif" border="0" /></a>
    		<a href="#" onclick="changeBGImage(2)"><img id="bbutton" src="img/bbutton_off.gif" border="0" /></a>
    		<a href="#" onclick="changeBGImage(1)"><img id="gbutton" src="img/gbutton_off.gif" border="0" /></a>
    	</div>
    </div>
    </body>
    </html>
    Callum Carolan

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dromenail View Post
    ok. i'm trying to make a header that can be changed by the clicking of a button. so i made this code to try and achieve that. for some reason it doesn't work. i'm not particularly skilled at javascript so i can't spot any errors that might be obvious to other people.

    Code JavaScript:
    if (document.body.getElementById('headerbar').style = "background: url(img/headerg.gif)"){
    document.body.getElementById('headerbar').style = backImage[whichImage];
    }
    Well, in the if clause you're using assignment and not equality, so that will always be true.

  3. #3
    SitePoint Enthusiast Dromenail's Avatar
    Join Date
    Nov 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i changed the

    if(document.body.getElementById('headerbar').style = "background: url(img/headerg.gif)"){

    to

    if (document.body.getElementById('headerbar').style == "background: url(img/headerg.gif)"){

    and it still doesn't work
    Callum Carolan

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The style object will never return equal to a string-
    and element.style.background is a shortcut, and will probably expand to include the other background properties, whether or not you set them.

    Your best bet is to set the style="background-image:url('img/headerg.gif')" in the html and test for element.style.backgroundImage.

    Even then, some browsers will return an absolute path for relative urls, so you may need to test indexOf instead of equals.

  5. #5
    SitePoint Enthusiast Dromenail's Avatar
    Join Date
    Nov 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k i've done all that and it's still broken.
    Callum Carolan

  6. #6
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another thing too, it should be document.getElementById and not document.body.getElementById, as I don't think elements have that property.

  7. #7
    SitePoint Enthusiast Dromenail's Avatar
    Join Date
    Nov 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i fixed this problem. pls close thread.
    Callum Carolan


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
  •