background-image javascript css

vodkadub · 12-08-2008 9:08am #1

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

DonkeyStyle \o/ · 12-08-2008 9:22am

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]

vodkadub · 12-08-2008 9:28am

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

12-08-2008 9:53am

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

vodkadub · 12-08-2008 9:55am

I need to change the css property dynamically in javascript

DonkeyStyle \o/ · 12-08-2008 10:09am

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

Eoin · 12-08-2008 10:16am

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');
}

DonkeyStyle \o/ · 12-08-2008 10:31am

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?

vodkadub · 13-08-2008 7:50am

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.

13-08-2008 9:26am

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");
}

vodkadub · 13-08-2008 9:30am

Thanks for you suggestions it's working now

vodkadub · 13-08-2008 9:43am

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-08-2008 11:07am

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

vodkadub · 13-08-2008 1:32pm

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!");
}

background-image javascript css

Comments