SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast Monkeyboy's Avatar
    Join Date
    May 2001
    Location
    England, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'm sure this is possible with CSS, but how?

    I'm capable of doing simple text rollovers in CSS. But I've seen sites where the background colour of the table cell seems to change colour as well, when rolled over.

    I'm pretty sure this can be done with CSS. How's it done?
    Monkeyboy

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    <td onmouseover="style.background='newcolor';" onmouseout="style.background='originalcolor';">

  3. #3
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same as how you get your hover in links.

    with some tricks involved, you can do that. though it works only in opera, IE and mozilla browsers.

    using text links,
    - set wdth and height
    - set background colour
    - set a:hover with the same properties above.

    check out my 2 sites below for an example.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  4. #4
    SitePoint Enthusiast Monkeyboy's Avatar
    Join Date
    May 2001
    Location
    England, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help!
    Monkeyboy

  5. #5
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,062
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to define this as a class? I tried this, but it doesn't work.

    .hlcell { onmouseover="style.background='yellow';" onmouseout="style.background='#FFFFFF';" }

    Thanks.

  6. #6
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ?

    a { border : 1px solid #000000; }
    a:hover { background-color : #000000; color : #FFFFFF; }
    a:link { backgorund-color : #FFFFFF; color : #000000; }

    <a href="test.htm"> Move your Mouse over Me </a>

    try the above code.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  7. #7
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jt,

    The mouseover needs to be in your html (td, div etc.).

    There must be a way to change the class using script, but I don't know that one. Perhaps someone else can help?

    If your using an <a> to trigger the rollover, LL's example is your best bet. If you have an <a> nested in a <td> be sure to set the width & height of the <a> to fill the cell (e.g. 100%) also set the <td> padding to 0px.

    If you want to change the <td> prop's (e.g. border-style) or aren't using an <a> in the rollover, then you'll need to use the script method:

    <td onmouseover="style.borderStyle='inset';" onmouseout="style.borderStyle='outset';">Queequeg</td>

    Does that make sense or am I talking from my ****?
    Last edited by isotope235; Jun 12, 2001 at 14:19.

  8. #8
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,062
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Yep. Thanks!

  9. #9
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't claim credit for this one, many thanks to St0rm @ CHP for the help!

    To change the class onmouseover:

    <td class="yourclass" onMouseOver="this.className='yourotherclass';" onMouseOut="this.className='yourclass';"> </td>

    & now for something completely different:

    I enjoy the sitepoint boards, but my load times are agonizingly slow, in the neighborhood of a minute per page...ugh!

  10. #10
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a way to do it in Netscape also:
    <ilayer><layer onmouseover="this.bgColor='#ff9900' onmouseout="this.bgColor='#ffffff'">blah</layer></ilayer>

    cool, eh?

  11. #11
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Anarchos
    Here's a way to do it in Netscape also:
    <ilayer><layer onmouseover="this.bgColor='#ff9900' onmouseout="this.bgColor='#ffffff'">blah</layer></ilayer>

    cool, eh?
    wow! this is cool!
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein


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
  •