SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    what property and selector is this?

    The counterstrike site has a css over effect on their buttons

    http://www.counter-strike.net

    I check the source and this is what I found.

    <td bgcolor=#9b9b9b onmouseover="this.style.backgroundColor='#b0b0b0';" onmouseout="this.style.backgroundColor='#9b9b9b';" background="">

    for the menu buttons. I thought it's javascript but it isn't. I tried it on a page and it works. what is this? CSS?
    http://www.soapbox101.com

  2. #2
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is actually Javascript, manipulating the CSS properties of the element (the TD).

  3. #3
    SitePoint Addict Messiah's Avatar
    Join Date
    Jun 2001
    Location
    Bloomington, In.
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    duckie - You beat me to it. But yes, it is javascript. You can also use this same method to call your class from a linked external style sheet instead of using it inline like in the example. This is useful if you want to keep all your layout seperate from your content.

    Here's how I use the method for row highlighting:

    Code:
    <tr onmouseover="this.className='on'" onmouseout="this.className='off'">
    Messiah | Ink-Press: web publishing simplified!

  4. #4
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's what I thought. but I can't find the javascript function that it calls, internally or externally.
    http://www.soapbox101.com

  5. #5
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is not actually calling a function, it is setting the property of the element in question.

  6. #6
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh so it's really javascript? interesting..
    http://www.soapbox101.com

  7. #7
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The stuff inside the onmouseover and onmouseout attributes is the javascript code - it's just a very simple one line piece of javascript that can be used inside an attribute.

    There is a way of achieving this effect using pure CSS, with no javascript involved. I use it on www.nemeweb.com .

  8. #8
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the tip skunk. I was wondering how if you could do this with just CSS.

    btw, I can't view the source of the link you gave.
    http://www.soapbox101.com

  9. #9
    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)
    I thought I'd just add a note. When doing rollover effects on table cells (assuming I'm using javascript) I find it much easier to place the events on the TABLE and use the event object to trigger rollovers/rollouts (instead of attaching those events to every single TD or TH)

    Oh, and javascript + CSS = DHTML
    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





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
  •