SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possible to change class with onMouse event?

    Whit a mouseover event it's easy to change css properties:

    onMouseOver="menu_1.style.background='#7e7ea2';"
    onMouseOut="menu_1.style.background='#2f2f3f';"

    But what I'd really like to do is to change the class:

    onMouseOver="menu_1.something.to.set.class='menu_mousover';"
    onMouseOut="menu_1.something.to.set.class='menu_off';"

    That way I could control the look of the mouseover event from within a linked stylesheet which just seems like a practical thing to do

    Any thoughts?

    Greetings

    Rik

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the className property.


    CSS
    Code:
    p.black {
    	font: normal 12px arial;
    	color: #000000;
    }
    p.red {
    	font: normal 12px arial;
    	color: #ff0000;
    }
    HTML/JavaScript
    Code:
    <p id="text" class="black">Some Text</p>
    <p><a href="#" onclick="document.getElementById('text').className='red'">change to red class</a></p>
    travis

  3. #3
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmmmmm never seen that before

    I'll try that

    thanks!!!!

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this to change the class onMouseover,

    Code:
    <td class="menu1" onMouseOver="this.className='menu2'" 
    onMouseOut="this.className='menu1'">Blah</td>
    0100010001101111011010000010000100000000

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Wow! Two for the price of one!!!

    Tried both, they work!!

    Thanks guys!!!!!

    Don't mean to nag but... does this work in all 4+ browsers?

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not Netscape 4. Only in IE4+ NS6+
    travis

  7. #7
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!!!

    I guess that will have to do then . It's only a mousover after all.

    My gut feeling about 'browsers compatibility' is this:

    • There's still a lot of people with a win98 first edition (including ie4) who don't know where the 'windows update' button is.
    • Netscape users are a bit mor 'net savy' and know how to download am upgrade.


    Are my assumptions correct?

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Zoef
    Are my assumptions correct?
    Acutally, according to thecounter.com's browser stats for November, the follwing facts are evident
    • More people use NS4 than IE4
    • Of all NS4+ users, 47.5% still use NS4.x
    • Of all IE4+ users, 2.2% still use IE4
    Not sure, but kinda flys in the face of your assumptions

    Now, on a side note, if IE supported CSS2 as well as Gecko-based browsers, you wouldn't need javascript for this rollover at all, just the :hover pseudo-class.
    Code:
    p.rollover {
    	font: normal 12px arial;
    	color: #000000;
    	}
    p.rollover:hover {
    	color: #ff0000;
    	}
    
    <p class="rollover">This paragraph will change to red when you mouse-over it, but only if your browser has full support for CSS2!!</p>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I stopped designing for NS 4.x ages ago. I design for w3 compliance. Why anyone would still use NS 4.x as opposed to Mozilla is beyond me...actually why anyone would use anything other than Mozilla is beyond me, but I'm not going to get into a browser war here
    0100010001101111011010000010000100000000

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehe, like the sig (Doh!)
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys!

    So my assumptions are proven wrong... I just can't log on to Sitepoint without learning something!

    I had already tried to use the hover subclass, something like this:
    Code:
    td.menu_item_off:hover {
        color: #ffffff;
        text-decoration: none;
        background: #999999; }
    But it would only change the color of the 'box' around the text, not the background color of the table cell which was ugly. (ie5 btw)

    The reason why anybody uses this or that browser is beyond me as well. Anyhow, 'why' questions give me a headache . The reason I'm using ie5 right now is that I recently formatted my harddisk, reinstalled everything and haven't bothered to install/upgrade to another one yet.

    But fact is people do use different browsers and I would like it if all of those people would more or less see what I meant them to see... that's all folks !!!!

    Thanks again guys, and see you around...


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
  •