Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

background-image javascript css

Options
  • 12-08-2008 10:08am
    #1
    vodkadub
    Closed Accounts Posts: 184 ✭✭


    Hi,

    I'm trying to change the background-image property of a div element when a certain event occurs such as onLoad any idea on how to do this?

    Thanks


Comments

  • Options
    #2
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    Here's a quick example...
    [HTML]<html>
    <head>
    <script type="text/javascript">
    function changestuff(state)
    {
    if (state)
    document.getElementById("test").style.backgroundImage = "url(test.jpg)";
    else
    document.getElementById("test").style.backgroundImage = "none";
    }

    </script>
    </head>

    <body>

    <div id="test" style="border: 1px solid #000;height: 100px;" onmouseover="changestuff(1)" onmouseout="changestuff(0)"></div>
    </body>
    </html>[/HTML]


  • Options
    #3
    vodkadub
    Closed Accounts Posts: 184 ✭✭vodkadub


    Thanks for the quick reply however, it doesn't seem to work, I'm using an external css file


  • Options
    #4
    p
    Registered Users Posts: 2,119 ✭✭✭p


    You said you wanted to use Javascript. That's got nothing to with whether your CSS is external or not. Be clearer man!


  • Options
    #5
    vodkadub
    Closed Accounts Posts: 184 ✭✭vodkadub


    I need to change the css property dynamically in javascript


  • Options
    #6
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    It's all here...
    http://www.w3schools.com/htmldom/dom_obj_style.asp


  • Advertisement
  • Options
    #7
    Eoin
    Registered Users Posts: 21,242 ✭✭✭✭Eoin


    I don't know why you would set the background on the onload event, but if you are using an external CSS file, you could change the jscript DonkeyStyle \o/ posted to something like this:

    [html]
    <html>
    <head>
    <script type="text/javascript">
    function changestuff(state)
    {
    if (state)
    {
    document.getElementById("test").className = "class1";
    }
    else
    {
    document.getElementById("test").className = "class2";
    }
    }

    </script>
    </head>

    <body>

    <div id="test" style="border: 1px solid #000;height: 100px;" class="class1" onmouseover="changestuff(1)" onmouseout="changestuff(0)"></div>
    </body>
    </html>
    [/html]


    in your CSS file: 
    .class1
{
background-image: URL('image1.jpg');
}
.class2
{
background-image: URL('image2.jpg');
}


  • Options
    #8
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    Yeah good call eoin.

    It shouldn't matter where the style rules are coming from anyway.
    I modified the example code to use an external stylesheet that explicitly sets a different background image on the test div and the JS still over-rules it... so even if it isn't tidy, it should at least work.

    Not sure why it isn't working for you... d'you think the browser or some script-blocking software could be interfering with it?


  • Options
    #9
    vodkadub
    Closed Accounts Posts: 184 ✭✭vodkadub


    Problem solved thanks, I need to mark each page now, something like <body id="home">, then I need javascript to identify each page and load different images accordingly any idea?
    Many thanks.


  • Options
    #10
    p
    Registered Users Posts: 2,119 ✭✭✭p


    As the other posters suggested. Best to just switch the class names via Javascript and have all the images set in CSS. That way, one Javascript function can be used, and you won't need to write lots of complicated code.

    You could then do something like this: 
    body#home div.styleA {
background-images: url("blah.gif");
}
body#home div.styleB {
background-images: url("moo.gif");
}

body#contact div.styleA {
background-images: url("grrr.gif");
}
body#contact div.styleB {
background-images: url("argh.gif");
}


  • Options
    #11
    vodkadub
    Closed Accounts Posts: 184 ✭✭vodkadub


    Thanks for you suggestions it's working now


  • Advertisement
  • Options
    #12
    vodkadub
    Closed Accounts Posts: 184 ✭✭vodkadub


    p wrote: »
    As the other posters suggested. Best to just switch the class names via Javascript and have all the images set in CSS. That way, one Javascript function can be used, and you won't need to write lots of complicated code.

    You could then do something like this: 
    body#home div.styleA {
background-images: url("blah.gif");
}
body#home div.styleB {
background-images: url("moo.gif");
}

body#contact div.styleA {
background-images: url("grrr.gif");
}
body#contact div.styleB {
background-images: url("argh.gif");
}

    Sorry, would you know the conditional javascript to select the images based on the body id


  • Options
    #13
    p
    Registered Users Posts: 2,119 ✭✭✭p


    vodkadub wrote: »
    Sorry, would you know the conditional javascript to select the images based on the body id
    I don't off the top of my head. But as I said in the previous post, the method I suggested, is most likely much simpler, because it requires less javascript.

    If you still want to use that method though, here's a very good site to learn how to access page elements via javascript:
    http://onlinetools.org/articles/unobtrusivejavascript/chapter2.html


  • Options
    #14
    vodkadub
    Closed Accounts Posts: 184 ✭✭vodkadub


    Problem solved, I used an empty div tag each page e.g <div id="homepg"> then for javascript i put;

    if(document.getElementById("homepg")){
    alert("This is homepage!");
    }


Advertisement