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
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

background-image javascript css

  • 12-08-2008 09: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

  • #2
    DonkeyStyle \o/
    Closed Accounts Posts: 7,144 ✭✭✭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]


  • #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


  • #4
    p
    Registered Users, Registered Users 2 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!


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


    I need to change the css property dynamically in javascript


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


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


  • Advertisement
  • #7
    Eoin
    Registered Users, Registered Users 2 Posts: 21,263 ✭✭✭✭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');
}


  • #8
    DonkeyStyle \o/
    Closed Accounts Posts: 7,144 ✭✭✭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?


  • #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.


  • #10
    p
    Registered Users, Registered Users 2 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");
}


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


    Thanks for you suggestions it's working now


  • Advertisement
  • #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


  • #13
    p
    Registered Users, Registered Users 2 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


  • #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