Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    pjo
    pjo is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    onclick change div background image

    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.

  • #2
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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'">

  • Users who have thanked jgadbois for this post:

    pjo (08-23-2007)

  • #3
    pjo
    pjo is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanx works like a charm!

  • #4
    New Coder
    Join Date
    Feb 2008
    Location
    England
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    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
    Last edited by barkermn01; 07-22-2008 at 04:34 PM.

  • #6
    DTE
    DTE is offline
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onclick change div background image doesn't work for me

    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!!

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

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