SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing the background-image css property with css

    I'm kinda new to javascript, especially changing css properties with it..
    this is the psuedocode i'm try to create
    Code:
    function toggle(class){
      var div = document.style.getElementbyClass(class);
      if (div.backgroundImage == 'expand.png'){
      div.backgroundImage = 'collapse.png';
      }
      else {div.backgroundImage = 'expand';
    }
    I am trying to make it so when a user clicks on a Category, the background image changes from basically a '+' to a '-'. I already have the show/hide script working....

  2. #2
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    Europe
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what is the problem?

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2004
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by colinr
    var div = document.style.getElementbyClass(class);
    hi colin
    "getElementByClass" isn't a function of JavaScript, you can create it, i'm sure if you look in forums you'll find it...

    you may try replacing the class for an id...
    would turn out something like this...

    function toggle(id){
    var div = document.getElementById(id);
    if (div.style.backgroundImage == 'expand.png'){
    div.style.backgroundImage = "collapse.png";
    }
    else {
    div.backgroundImage = "expand";
    }


  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Colin...http://www.computeruser.com/resource...ml?lookup=7786

    There are a number of ways to get/set CSS via the DOM; which one you use is generally determined by the overall methodology of the script involved. Would help to see that 'show/hide script' that's 'working'...

    http://www.dhtmlkitchen.com/learn/js/setstyle/index.jsp
    ::: certified wild guess :::

  5. #5
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    //SHOW/HIDE Script
    function toggle(divid) {
        var div = document.getElementById(divid);
        if (div.style.display == 'none') {
            div.style.display = 'block';
        } else {
            div.style.display = 'none';
        }
    }
    
    
    <!-- HTML Code -->
    <a onClick="toggle('download');" href="#">Download</a>
    works in IE 5, 5.5, and mozilla as far as I know, not Safari though i think ;(

  6. #6
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a little extra...

    The reason why I want to use a "getByClass" is I prefer not to have the give each header (category name) a div too, the sub-tems are already a div and it would be getting kinda out-of-hand...


    and I know that was a little closer to code than pseudocode, by i called it that becuase of the getElementByClass function call....

  7. #7
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is it true to say that javascript cannot alter styles set in an external style sheet? only inline (or inpage) styles?


Bookmarks

Posting Permissions

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