#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Location
    San Ramon, CA
    Posts
    72
    Rep Power
    13

    Using CSS with TD tags


    I am discovering the abilities of CSS and it is very interesting

    I do have a question though

    Cann CSS be used to do two different sets of things at once

    A: allows you to manipulate text in an anchor tag in some desired way

    A:hover modifesit when the mouse is over the anchor tag

    TD will let you set different parameters

    I would like to set a background image or color in TD tag which I think is very easy but I want to change to another image or color it when I move the mouse over the tag

    almost like a

    TD:hover

    <STYLE>
    TD {
    background-color : #FFFF00;
    }

    TD.HOVER {
    background-color : #FF00AA;
    }
    </STYLE>


    I know this does not work but it may describe what I am trying to do in a better way

    Thanks for your time
    Last edited by jjanes; March 25th, 2003 at 03:57 PM.
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    hover on td elements
    works fine in css-capable browsers
    like mozilla or opera7,

    though if you are stuck with ie, then you must find some workaround
  4. #3
  5. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,905
    Rep Power
    3969
    You could use some combination of CSS and JS. Something like so:

    At the top of the page:
    Code:
    <style type="text/css">
    
    TD {
         background-color: #fff;
         color: #000;
    }
    
    TD:hover {
         background-color: #000;
         color: #fff;
    }
    </style>
    
    <script type="text/javascript">
    var IE=(navigator.appName.indexOf('Microsoft') != -1);
    </script>

    Then on your <td> tags, use this onmouseover script.

    Code:
    <td onmouseover="if (IE){ this.style.backgroundColor='#000'; this.style.color='#fff'; }">....</td>
    Give that a shot.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Location
    San Ramon, CA
    Posts
    72
    Rep Power
    13
    I am stuck in IE so I tried the scripts and AND BAM IT WORKED

    THANKS ALOT

    that script worked GREAT I added a mouse out to turn it back to the orignal and it is working great

    Damn now I have to go change all my websites to incorporate that script

    Jeff
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Location
    San Ramon, CA
    Posts
    72
    Rep Power
    13
    I guess the person who wrote the last post missed my sarcasm.
    I won't be sarcastic in this post.
    I just implied I have a lot of sites I am planning on using this in.

    I thank you again for your help it does work great. It will make my menu coding snippits much easier to use

    Thank you again Akh and kicken
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2002
    Location
    The Rock
    Posts
    5
    Rep Power
    0
    you can just specify a seperate class and use javascript to switch between them on whatever event you want. For example:
    Code:
    <html>
    <head>
    	<title>Untitled</title>
    	<style type="text/css">
    	<!--
    	.BUTTONTABLE {
    		BORDER:black solid 1px;
    	}
    	.BUTTON{
    		BACKGROUND:red;
    		COLOR:white;
    		TEXT-ALIGN:center;
    	}
    	.BUTTONOVER {
    		BACKGROUND:blue;
    		COLOR:white;
    		CURSOR:pointer;
    		TEXT-ALIGN:center;
    	}
    	-->
    	</style>
    </head>
    
    <body>
    
    <table width="300" border="0" cellspacing="0" cellpadding="4" class="buttontable">
    <tr>
    	<td class="button" onmouseover="this.className='buttonover';" onmouseout="this.className='button';">Button 1</td>
    	<td class="button" onmouseover="this.className='buttonover';" onmouseout="this.className='button';">Button 2</td>
    	<td class="button" onmouseover="this.className='buttonover';" onmouseout="this.className='button';">Button 3</td>
    </tr>
    </table>
    
    </body>
    </html>
    This page makes a simple horizontal nav bar (simply add <tr>s to create a vertical one) with 3 buttons on it that respond to the onmouseover and onmouseout events to create a nice simple rollover effect. There's nothing stopping you from using images for the background, different border colors, text effects, or anything else CSS supports in the definition either. You can also, of course, put the style definitions in a seperate linked .css document rather than in the <head> of the current document and it will still work.

    It works with all the browsers I've tested it on too. You can even extend it further by specifying an "onclick" event in the TD to send you to your location of choice, rather than putting in normal <a href="... links (which would then have to be styled) within the <td>s.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Location
    San Ramon, CA
    Posts
    72
    Rep Power
    13
    another great idea I knew I came to the right place

    thanks again

    never even thought about the onclick aspect thanks for that too

    Jeff
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Location
    San Ramon, CA
    Posts
    72
    Rep Power
    13
    One question is it possible to makes changes to a 'parent tag'

    such as
    <table>
    <tr>
    <td class=abc> <---- this changes when anchor is rolledover
    <a onmouseover=parenttd.className='class1' >xyx</a>
    </td>
    </tr>
    </table>


    when doing a mouseover of the anchor tag changes the class of the td tag that contains it

    forgive my syntax but I think you understand what I am asking
  16. #9
  17. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,905
    Rep Power
    3969
    Yes, different forms though. in IE you would use this.parentElement and in Gecko(Mozilla, NS, etc) you would use this.parentNode

    So if you reuse that IE detect script from before, something like this should do it:

    Code:
    <table>
    <tr>
    <td class=abc> 
    <a onmouseover="if (IE){
         this.parentElement.className='class1';
    } else {
         this.parentNode.className='class1';
    }">xyx</a>
    </td>
    </tr>
    </table>
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Location
    San Ramon, CA
    Posts
    72
    Rep Power
    13
    OK thanks for ALL the help. I look forward to seemy web pages works as smoothly as I expect them to with the help of this information

    Jeff

IMN logo majestic logo threadwatch logo seochat tools logo