SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    TD Element - Change CSS Class or Change Background image

    Hello

    I am having an issue dynamically changing the background of a TD element. The way I see this working is to either change the TD element's CSS class or to change the TD element's background image but I can not get either to work.

    Here is what I was thinking...

    Code:
    function Display(tdId)
    {
       document.getElementById(tdId).setAttribute('background','newBackgroundImage.gif');
    }
    or

    Code:
    function Display (tdId) 
    {
       document.getElementById(tdId).setAttribute('class','differentCssClassName');
    }
    Here is my HTML code.

    Code:
    <td class="CssClassName" id="tdId">
       <a href="javascript: Display('tdId');">FAQ's</a>
    </td>
    Neither of these options work and neither of them throw a javascript error.

    Does anyone know how I can change the TD element's background image or change the CSS Class for the TD element?

    Any help would be appreciated.

    Thanks

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using backgroundImage instead of background.

    Alternatively, this works too: DEMO.


    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Andy

    Thank you very much for the post. That is exactly what I needed for the image background. Since then, I have also occurred another issue where I think it would be easier to just change the CSS class instead of having to change every attribute in the class. For example, I need to change the hover, link and visited attributes.

    In this case, I think it would be easy if I could just change the class. So in my example below, I think it would be easier to change the class="TabGreyBlueText" to class="TabWhiteText" then to change everything. Do you by chance know how to do that using JavaScript?

    Also, very nice example!!! Your effort is very much appreciated!!!

    Code:
    a.TabGreyBlueText:link { color: #66665C; }
    a.TabGreyBlueText:visited { color: #66665C; } 
    a.TabGreyBlueText:hover { color: #FFFFFF; }
    Code:
    a.TabWhiteText:link { color: #003399; }
    a.TabWhiteText:visited { color: #003399; }
    Code:
    <a href="javascript: Display('FAQ');" class="TabGreyBlueText" id="FAQStyle" >FAQ's</a>

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad that it was useful.

    I've not tested this, but hopefully it'll work and if not it should be enough to give you the idea.
    Code:
    <script type="text/javascript" language="javascript">
      <!--
        var woodClass = 'TabGreyBlueText';
        var metalClass = 'TabWhiteText';
      	  
        function Display(tdId){
      var foo = document.getElementById(tdId);
        if(foo.className==woodClass){
      	foo.className=metalClass;
        }
        else{
      	foo.className=woodClass;
        }
        }
      //-->
      </script>
    Andy
    From the English nation to a US location.

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That response was sat in an open browser window all day. I typed it this morning and forgot to hit submit - d'oh! Hope it solves your problem.
    From the English nation to a US location.

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't worry about the letting it sit in the browser... I appreciate your knowledge and time.

    Your suggestion worked almost perfect. There is one issue. When the page loads, the <a href> text is underlined but for some reason when I use this code, the text no longer is underlined. The link still works but is not underlined. Do you know why changing the class is removing the underline? I do not have text-decoration: none; in the code (I actually set it to underline).

    To make this situation even more strange, everything displays correctly in FireFox so the above issue is only occurring in IE.

    Here is my relevant code.

    Code:
    .TabWhiteText { text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; }
    a.TabWhiteText:link { color: #003399; }
    a.TabWhiteText:visited { color: #003399; }
    
    .TabGreyBlueText { text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #66665C; }
    a.TabGreyBlueText:link { color: #66665C; }
    a.TabGreyBlueText:visited { color: #66665C; } 
    a.TabGreyBlueText:hover { color: #FFFFFF; }
    
    var whiteClass = 'TabWhiteText';
    var greyBlueClass = 'TabGreyBlueText';
    
    document.getElementById(textStyle).className = whiteClass;

  7. #7
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That sounds like an odd quirk. Try moving the text-decoration declaration to here:
    Code:
    a.TabWhiteText:link { text-decoration: underline; color: #003399; }
    a.TabGreyBlueText:link { text-decoration: underline; color: #66665C; }
    Andy
    From the English nation to a US location.

  8. #8
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was it!!! Thanks for all of your help!!!


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
  •