#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    5
    Rep Power
    0

    problem with switching CSS class names


    i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes.

    so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all.

    the code i'm having a problem with reads like this:
    <td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'">

    it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative.


    oh, and by the way i'm using IE 6.0.2600
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Location
    Italy, EU
    Posts
    517
    Rep Power
    12
    I've never had problem with that syntax...
    Post the rest of your code (in particular the tables' one), it would be easier to help you!
    Cheers, Dave
  4. #3
  5. No Profile Picture
    Self-banned
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2004
    Location
    http://middle.nowhere.com
    Posts
    2,288
    Rep Power
    3606
    Like magma says, that should work. I used a similar idae on a webpage last year. However, I must have run into the same problem you did, bcause I now have the javascript in functions and call them from within my html:

    javascript file:
    Code:
    function nav_on(name){
    
       name.className = "nav_alt";
    
    }
    
    function nav_off(name){
    
       name.className = "nav";
    
    }
    html snippet:
    Code:
    <td class="nav" onMouseOver="nav_on(this);" onMouseOut="nav_off(this);">
    ((note: the capitalization in the attributes is unnecessary: onMouseOver == onmouseover))
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    5
    Rep Power
    0
    this is the code in it's entirity...

    <!DOCTYPE html
    PUBLIC"-//W3C//Dtd XHTML 1.0 Strict//EN"
    "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-strict.dtd">

    <!--Head-->
    <html>
    <head>
    <title>
    basic XHTML w/ CSS & JS
    </title>

    <!--CSS-->
    <style type="text/css">
    <!--
    body { background-color: #FCFCFC;
    font-family: sans-serif;
    font-size: small;
    font-weight: bolder;
    color: #000000;
    }
    /*table attributes*/
    table.menu{ background-color: #FFFFFF;
    padding: 0; margin: 0;
    border-width: 0;
    text-align: center;
    align: center}
    td.Ovr{ background-color: #FCFCFC; cursor: hand;}
    td.Out{ background-color: #333333;}
    td.menu-header { background-color: #FFFF00;}
    /*hyperlinks*/
    a:link { color: #FFFF00; text-decoration: none;}
    a:visited { color: #FFFF00; text-decoration: none;}
    a:hover { color: #FFFF00; text-decoration: underline;}
    a:active { color: #FFFF00; text-decoration: none;}

    -->
    </style>

    </head>
    <body >


    <table class="menu" width="360" valign="top" noshade align="center">
    <tbody>
    <tr>
    <td class="menu-header" >HOME</td>
    <td><b> : </b></td>
    <td onmouseover="class='ovr'" onmouseout="class='out'" class="out">
    <a href="http://www.none.com">LINK</a></td>
    <td><b> : </b></td>
    <td onmouseover="class='ovr'" onmouseout="class='out'" class="out">
    <a href="http://www.none.com">LINK</a></td>
    </tbody>
    </table>
    </body>
    </html>
  8. #5
  9. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    <td onMouseOver="this.className='Ovr';" onMouseOut="this.className='Out';" class="Out">
    <a href="http://www.none.com">LINK</a></td>
  10. #6
  11. No Profile Picture
    Self-banned
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2004
    Location
    http://middle.nowhere.com
    Posts
    2,288
    Rep Power
    3606
    Good catch, Cheif! Gotta remember those semicolons!
  12. #7
  13. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    I don't think it was the semi colons, I think it was the fact that your class names are Ovr ant Out, whereas you were trying to call them with ovr and out. I think it was a case sensitivity issue...
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    5
    Rep Power
    0

    well that didn't work


    the caps thing is definately not right and i changed it to
    <td onmouseover="this.class='ovr' ...> and it still didn't work.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    5
    Rep Power
    0
    oh, wait... thanks chief, and thanks "theJim" for bringing the semicolons to my attention. turns out that was the problem, i'd tried everything but that.

    thnx again.
  18. #10
  19. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    Originally Posted by nintendosuicide
    the caps thing is definately not right and i changed it to
    <td onmouseover="this.class='ovr' ...> and it still didn't work.
    That was my point... That clearly won't work.

    Your problem has nothing to do with the semi colons at all...

    There are two things wrong with this code...

    1. this.class doesn't mean anything. It simply won't do anything except throw JS errors. It needs to be this.className

    2. Your problem lies with case sensitivity. The reason it didn't work is because you don't have classes called out or ovr. They are called Out and Ovr, with CAPITAL O's. JavaScript is ub0r case sensitive, so doing stuff like calling a class with dodgy case sensitivity will always screw up your site...

    Now do you see what I was saying?
    Last edited by ChiefWigs1982; May 6th, 2004 at 02:06 AM.

IMN logo majestic logo threadwatch logo seochat tools logo