...

View Full Version : onclick change div background image



pjo
08-22-2007, 04:53 PM
I am trying to change a divs background image based on css.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>TheWebsite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#hdr {
background : url(hdr_bg.gif) repeat;
height : 150px;
width : 100%;
}
#hdr1 {
background : url(alt1.gif) repeat;
height : 150px;
width : 100%;
}
#hdr2 {
background : url(alt2.gif) repeat;
height : 150px;
width : 100%;
}
#hdr3 {
background : url(alt3.gif) repeat;
height : 150px;
width : 100%;
}
</style>

</head>
<body >
<div id="hdr">Sometext</div>

<div><b>Alternate Background Images</b> -<br />
[<a href="#none" onclick="hdr.id='hdr1'" >Option 1</a>]
[<a href="#none" onclick="hdr.id='hdr2'">Option 2</a>]
[<a href="#none" onclick="hdr.id='hdr3'">Option 3</a>]
[<a href="#none" onclick="hdr.id='hdr'">Default</a>]
</div>

</body>
</html>



Each one link works individually, but only if the page is refreshed. I am currently using something similar to change the body background (body where hdr is) and it works fine, just cant get this one going. Any help is appreciated.

jgadbois
08-22-2007, 05:08 PM
Change the css classes to work on classes.



.hdr1 {
background : url(alt1.gif) repeat;
height : 150px;
width : 100%;
}


Then change the onclick handler's to change the classname of the div.



<a href="#none" onclick="document.getElementById('hdr').className ='hdr1'">

pjo
08-23-2007, 01:49 AM
Thanx works like a charm!

dewy
07-22-2008, 04:02 PM
hey,

i know this thread is really old, but i am trying to do something using it at the moment.

Is there anyway i can change the div background, but then also change the colour of a single link on the other side of the page. Has anyone seen anything like this before?

Thanks for your help

James :)

barkermn01
07-22-2008, 04:20 PM
that meens having more in your CSS file use

docmuent.getElementById("hdr").style = 'background-image: URL(*YOUR IMG LOCATION*);';

or if it is onclick of the div you want to change use
onclick="this.style = 'background-image: URL(*YOUR IMG LOCATION*);';"

And your link page would be

in your link use <a href="*your location*" id="thislink">some text</a>
document.getElementByID("thislink").style = 'color: #colour'; or some thing

DTE
07-28-2008, 04:57 PM
Help,

I found the "onclick change div background"-code by pjo and some modifications by jgadbois. I have tried the example but it doesn't work for me. Please help me make this code work. Here is the css and js.

<style type="text/css">
#hdr {
background : url(header_1.png) no-repeat;
height : 180px;
width : 850px;
}
.hdr1 {
background : url(header_2.png) no-repeat;
height : 180px;
width : 850px;
}
.hdr2 {
background : url(header_3.png) no-repeat;
height : 180px;
width : 850px;
}
.hdr3 {
background : url(header_1.png) no-repeat;
height : 180px;
width : 850px;
}
</style>


<HTML>

<div id="hdr">Sometext</div>

<div><b>Alternate Background Images</b>
<br />
<a href="#none" onclick="document.getElementById('hdr').className='hdr1'">Option 1</a>
<a href="#none" onclick="document.getElementById('hdr').className='hdr2'">Option 2</a>
<a href="#none" onclick="document.getElementById('hdr').className='hdr3'">Option 3</a>
</div>

Any help is appreciated. Thans in advance!!:thumbsup:

syedfahim
11-16-2012, 11:53 AM
hi
DTE

Its not working for you bcoz you are calling background using id not in class
check this i have done some modification and it works.

<!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=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.hdr {
background : url(bg1.jpg) no-repeat;
height : 180px;
width : 850px;
}
.hdr1 {
background : url(bg2.jpg) no-repeat;
height : 180px;
width : 850px;
}
.hdr2 {
background : url(bg3.jpg) no-repeat;
height : 180px;
width : 850px;
}
.hdr3 {
background : url(bg4.jpg) no-repeat;
height : 180px;
width : 850px;
}
</style>

</head>

<body>

<div id="hdr" class="hdr1">Sometext</div>

<div><b>Alternate Background Images</b>
<br />
<a href="#none" onclick="document.getElementById('hdr').className='hdr1'">Option 1</a>
<a href="#none" onclick="document.getElementById('hdr').className='hdr2'">Option 2</a>
<a href="#none" onclick="document.getElementById('hdr').className='hdr3'">Option 3</a>
</div>
</body>
</html>


Regards

Syed Fahim



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum