Results 1 to 8 of 8
  1. #1
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Mouse-overs (Jus' like Woody's!)

    Can someone clear up the code I need to perform a mouse-over using CSS - much like the front page to WOPR? I'm interested in making an entire table cell "light up" by defining something in the style sheet, and then I believe I need to use the onMouseOver and onMouseOut event handlers to pull off this bit 'o magic?

    Any assistance would be greatly appreciated!

    Cheers,
    -Mark

  2. #2
    New Lounger
    Join Date
    May 2001
    Location
    New York City, NY
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Mouse-overs (Jus' like Woody's!)

    I don't believe you can set this in a style sheet, because onmouseover and onmouseout are EVENTS. Instead, you set each TD individually. The following table contains cells that have red text when the mouse is over them, black when the mouse is not:

    <table>
    <tr>
    <td onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Cell 1</td>
    <td onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Cell 2</td>
    <td onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Cell 3</td>
    </tr>
    <tr>
    <td onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Cell 4</td>
    <td onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Cell 5</td>
    <td onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Cell 6</td>
    </tr>
    </table>

    Hope this helps,

  3. #3
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS Mouse-overs (Jus' like Woody's!)

    The Lounge code might be this:

    // overLIB 3.33 -- This notice must remain untouched at all times.
    // Copyright Erik Bosrup 1998-2001. All rights reserved.
    //
    // By Erik Bosrup (erik@bosrup.com). Last modified 2001-01-26.
    // Portions by Dan Steinman (dansteinman.com). Additions by other people are
    // listed on the overLIB homepage.
    //
    // Get the latest version at http://www.bosrup.com/web/overlib/

    But it's a guess on my part.

  4. #4
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Mouse-overs (Jus' like Woody's!)

    Wow, now that is a slick, fast loading little scriptoid right there. Not the highlighting table action that I want but something I will definitely be incorporating!! Thank you for the snippet and the link!
    -Mark

  5. #5
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Mouse-overs (Jus' like Woody's!)

    Thanks Stan - I believe with the example you have provided that I can make things happen the way I want them to. I can use the handlers to perform the actions I need....a little playing about after all the house is in bed so that I can concentrate should help immensely. What I want to do is to define a style in the stylesheet for table cells - one normal and one 'highlighted' in a paler color - and then use the onmouse handlers to pull off the action.

    I got this idea from an interesting website that uses CSS to pull off some really neat stuff - <A target="_blank" HREF=http://www.solardreamstudios.com>http://www.solardreamstudios.com</A>. The webmaster there is using CSS to add transparency to banner ads and the like, which I will *never* use, but the transparency and other effects he's got are great tools.

    Again, mucho gracias for your input. Now all two or three people that look at the homepage can be thrilled to no end! <img src=/S/wink.gif border=0 alt=wink width=15 height=15>
    -Mark

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS Mouse-overs (Jus' like Woody's!)

    Whoops. Here's the real answer: this goes in your stylesheet or <STYLE> tags.
    <pre>A:HOVER {
    color: #bb00ff;
    font-weight: bold;
    text-decoration: underline;
    }</pre>

    (Adapted from the Lounge's OldStyle style sheet.)

  7. #7
    New Lounger
    Join Date
    May 2001
    Location
    New York City, NY
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Mouse-overs (Jus' like Woody's!)

    This is the correct answer for links, but the question was what to do with table cells. Am i wrong, or can HOVER only be used with links, and not with other tags?

  8. #8
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS Mouse-overs (Jus' like Woody's!)

    I think you're right. I was looking at the Lounge code and not focusing on the original original question. In the immortal words of Emily Litella, "Never mind."

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •