www.webdeveloper.com
Results 1 to 2 of 2

Thread: Change Div background onclick

  1. #1
    Join Date
    Jul 2010
    Posts
    2

    Change Div background onclick

    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>

  2. #2
    Join Date
    Jun 2010
    Posts
    92
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles