SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Tenacious T Tyhe's Avatar
    Join Date
    May 2001
    Location
    Hilversum
    Posts
    651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How To: Make a cell in my table change color when you go over it

    Heya,

    i was wondering what CSS I would use to make a cell in my table change color when you go over it with your mouse and there is a link inside it.

    Greetings &

    Thank you!
    That's all folks...

  2. #2
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont know about CSS but you could do it in js thus:

    Code:
    <script language="JavaScript">
    <!--
    function chgBg(obj,color){
    if (document.all || document.getElementById)
      obj.style.backgroundColor=color;
    else if (document.layers)
      obj.bgColor=color;
    }
    //-->
    </script>
    
    <table width=150>
    <tr>
      <td onMouseover="chgBg(this,'khaki')" onMouseout="chgBg
    (this,'white')"></td></tr>
    <tr>
      <td onMouseover="chgBg(this,'orange')" onMouseout="chgBg
    (this,'white')"></td></tr>
    </table>

  3. #3
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found it in css:

    Code:
    <html> 
    <head> 
    <style type="text/css"> 
    .normal {background-color:#FFCC00; width:200; cursor:default;} 
    .highlight {background-color:#FFFFCC;cursor:hand;} 
    .smartlink {color:black; text-decoration:none;} 
    </style> 
    </head> 
    
    <body> 
    <table width="200"> 
    <tr> 
    <td class="normal" onMouseOver="this.className='highlight';" onMouseOut="this.className='normal';" onClick="window.location.href='http://www.echoecho.com';"> 
    <a href="http://www.echoecho.com" class="smartlink">Hey Hey</a> 
    </td> 
    </tr> 
    </table> 
    </body> 
    </html>
    From:
    http://www.echoecho.com/ubb/viewthread.php?tid=108

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Lancaster, PA
    Posts
    3,019
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    But the BIG question is....

    ...which method is best to use?

    Thanks for asking and answering this question guys, but which way do you think is best to do simple rollovers like this? Is one method more "compatible"
    with browsers than the other?

    It sure looks like the CSS method would be the easiest and least complicated method to design with though.

    Thanks for the answer here Glen, and for the question Tyhe!

    Steve

  5. #5
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good follow up question.

    I would say that CSS is the best to use as the code is extremely cross browser compatible, and hurdles the question of whether the user has javascript enabled!

    That said I do not know of a huge reason why CSS is better to use than javascript (especially as js is enabled on the vast majority of browsers).

    Perhaps a scripter with good knowledge of both can step in here?

    Glen

  6. #6
    Tenacious T Tyhe's Avatar
    Join Date
    May 2001
    Location
    Hilversum
    Posts
    651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will try both and see which I like more!

    Thanks a bunch glenpake!
    Great!

    Tyhe.
    That's all folks...

  7. #7
    SitePoint Addict Philip Toews's Avatar
    Join Date
    Dec 2001
    Location
    Kuala Belait, Brunei
    Posts
    367
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    any potential netscape (the devil) problems?

    Will this code produce errors in Netcape (may they burn in the coders hell that they create)?

    You mentioned cross browser compatibility is strong. Has anyone tested this particular CSS on Netscape 4.x and up?
    Philip Toews Professional esl Educator and ASP.NET wannabe

    http://www.philiptoews.com
    philip@philiptoews.com

  8. #8
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are tonnes of ways to do this. Being cross browser with Css makes it even tougher.

    Code:
    <td name="cell1" id="cell1" onmouseover="changeState(this.id,true)" onmouseout="changeState(this.id,false)"><a href="business.htm">Apparition 
                  History</a>
    and in the <script> tag

    Code:
    function changeState(id,bool){
    	var id;
    	var divObj = (document.layers) ? eval("document.layers['"+id+"'].document.layers['"+id+"']") : document.all ? eval("document.all['"+id+"']") : eval("document.getElementById('"+id+"')");
    	(bool==true)?divObj.style.backgroundColor='rgb(242,242,242)':divObj.style.backgroundColor='white';
    	}
    Last time I checked that was cross browser. As for Netscape 4.7 I think I did have it working on that browser but I have checked in a year.

    As for the reason I use functions instead of this.style.backgroundColor is simply for re-uability sake. I use this a lot so I hate retyping anything.

    As for whats better. You are actually using javascript in both sorry. But the way it is being done is not cross browser I don't think. That method of this.classname I believe is limited to Netscape. But either way all of these do the same thing.
    Last edited by Maelstrom; Mar 4, 2002 at 19:51.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  9. #9
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On a related note: you should set it up so that the whole table cell acts as a link and not just the text. if something changes colour when you mouse over it, you expect to be able to click it, not to poke around in the cell till you find the bit that works.

    You can do that by using a CSS class for the table cells in which the cursor is set to hand and then use a javascript onClick event to capture someone clicking on it.

  10. #10
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by brokenvoice
    On a related note: you should set it up so that the whole table cell acts as a link and not just the text. if something changes colour when you mouse over it, you expect to be able to click it, not to poke around in the cell till you find the bit that works.

    You can do that by using a CSS class for the table cells in which the cursor is set to hand and then use a javascript onClick event to capture someone clicking on it.
    But then it isn't backwards compatible. I didn't think that worked in nn4.7.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  11. #11
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The onClick part will work and that's the most important usability type feature out of the two I mentioned. It's worth giving it a shot.

  12. #12
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS 2 uses this hand-cursor (so that is supported in IE6 and Mozilla):

    Code:
    object.style.cursor = 'pointer';

  13. #13
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here's another example of Changing Cell Color on MouseOver

    I used this effect using JavaScript on one of my sites (www.sangrea.net/newcomputerhelp) as an alternative to to rollover buttons. Grab the code if you like :-)

    eg. <td width="100%" bgcolor="#FFCCFF" align="center" ONMOUSEOVER="this.bgColor = '#FFFFDD';"
    ONMOUSEOUT="this.bgColor = '#FFCCFF';"
    ONCLICK="this.bgColor = 'brown';">

    By specifying a hover stylesheet you can create a rollover button effect on a table-based navbar - but in IE only.

    Opera handles the hover only, but not the cell mouseover effect so you need to be careful not to make the color of the hover effect such that it looks bad with the cell color.

    The script degrades gracefully, if not excitingly, in Netscape, that is, it behaves just like any other link, ie. no reaction.

    Hope this is helpful.

  14. #14
    SitePoint Evangelist worksdev's Avatar
    Join Date
    Mar 2002
    Location
    Central, PA - originally from Monterey, CA
    Posts
    497
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After reading Kevin Yank’s awesome article : CSS Is Easy! http://www.webmasterbase.com/article/309

    I experimented by creating a nav bar with this code below. I looks good in Netscape 6 & IE but not in Netscape 4.

    You can see the nav bar and two others at: http://www.worksdev.com/testcss.htm

    For the CSS experts, this seems to work nicely, but is there an even better way?


    Here’s the code:

    CSS code put between the head tags or in a linked style sheet.

    <!--
    .navbar { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

    TABLE.navbar A:link { font-size: 10px; color: #FFFFFF; height: 20px; width: 90px; border: 1px #3333FF inset; background-color: #3333FF; background-repeat: repeat; text-decoration: none; text-align: center; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; text-transform: uppercase}

    TABLE.navbar A:active { font-size: 10px; color: #FFFFFF; height: 20px; width: 90px; border: 1px #3333FF inset; background-color: #3333FF; background-repeat: repeat; text-decoration: none; text-align: center; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; text-transform: uppercase}

    TABLE.navbar A:visited { font-size: 10px; color: #FFFFFF; height: 20px; width: 90px; border: 1px #3333FF inset; background-color: #3333FF; background-repeat: repeat; text-decoration: none; text-align: center; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; text-transform: uppercase}

    TABLE.navbar A:hover { font-size: 10px; height: 20px; width: 90px; border: 1px #33CCFF inset; background-color: #33CCFF; background-repeat: repeat; font-weight: bold}

    -->
    </style>

    Place the nav class around the table.

    <table border="0" cellpadding="0" cellspacing="0" class="navbar">
    <tr>
    <td><a href="#">text link 1</a></td>
    <td><a href="#">test link 2</a></td>
    <td><a href="#">test link 3</a></td>
    <td><a href="#">test link 5</a></td>
    </tr>
    </table>


    worksdev=Sean


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
  •