onclick change div background image

pjo · 08-22-2007, 03:53 PM

I am trying to change a divs background image based on css.

Code:

<!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, 04:08 PM

Change the css classes to work on classes.

Code:

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

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

Code:

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

pjo · 08-23-2007, 12:49 AM

Thanx works like a charm!

dewy · 07-22-2008, 03: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, 03: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, 03: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!!

syedfahim · 11-16-2012, 10: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