Change Div background onclick

**xavier039** · 07-06-2010 03:22 PM

I am relatively new to working with Javascript so I am hoping somebody can help me out here.

What I would like to do is have the div background change when a user clicks on another image or link.

I set up a few classes in CSS each with their own background image. Here is what I have but I am not sure what I am missing. Thanks so much!!

HTML 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 {
	height : 150px;
	width : 100%;
	background-image: url(gang/Bass.png);
	background-repeat: no-repeat;
  }
.hdr1 {
	height : 150px;
	width : 100%;
	background-image: url(gang/carl.png);
	background-repeat: no-repeat;
  }
.hdr2 {
	height : 150px;
	width : 100%;
	background-image: url(gang/Chet.png);
	background-repeat: no-repeat;
  }
.hdr3 {
	height : 150px;
	width : 100%;
	background-image: url(gang/Mel.png);
	background-repeat: no-repeat;
  }
</style>
 
</head>
<body >
<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>
    <a href="#none" onclick="document.getElementById('hdr').className ='hdr'">Default</a>
  </div>
  
</body>
</html>

**adamou** · 07-06-2010 05:07 PM

What you might want to do instead is

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-repeat: no-repeat; height:150px;}
.hdrDefault { background-image: url(gang/Bass.png); }
.hdr1 { background-image: url(gang/carl.png); }
.hdr2 { background-image: url(gang/Chet.png); }
.hdr3 { background-image: url(gang/Mel.png); }
</style>
 
</head>
<body >
<div id="hdr" class="hdrDefault">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>
    <a href="#none" onclick="document.getElementById('hdr').className ='hdrDefault'">Default</a>
  </div>
  
</body>
</html>

Thread: Change Div background onclick

Thread Tools

Display

Change Div background onclick

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions