SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    changing table cell colour using hover with a text link

    Okay I have the following navigation table:

    Code:
    <table border="1" cellpadding="4" cellspacing="0" bgcolor="#008cb5" width="120px" align="center" bordercolor="#037D9B">
    	<tr>
    		<td class="navigation"><a href="index.html">Home</a></td>
    	</tr>
    	<tr>
    		<td class="navigation">Company</td>
    	</tr>
    	<tr>
    		<td class="navigation">Services</td>
    	</tr>
    	<tr>
    		<td class="navigation">Crossweb</td>
    	</tr>
    	<tr>
    		<td class="navigation">Products</td>
    	</tr>
    	<tr>
    		<td class="navigation">Projects</td>
    	</tr>
    	<tr>
    		<td class="navigation">Downloads</td>
    	</tr>
    	<tr>
    		<td class="navigation">Links</td>
    	</tr>
    	<tr>
    		<td class="navigation">DS ltd</td>
    	</tr>
    </table>
    Now I want to be able to change the whole table cell colour when I rollover the hyper link?

    How is it best to do this?

    Using external css I have the following link attributes and table attributes...

    Code:
    td.navigation {
    	color:white;
    	font:0.75em verdana, arial, helvetica, sans-serif;
    	text-align:left;
    	font-family:verdana, arial, helvetica, sans-serif;
    }
    
    a {
    	color:#ff0000;
    	text-decoration:none;
    	font-family:verdana, arial, helvetica, sans-serif;
    	}
    a:link {color:#008080;}
    a:visited {color:#cccccc;}
    a:hover {color:#000080;}
    Can I do this correctly using css, as at present it only changes the bacground of the text rather than the whole td cell???

    Thanks

    Sarah
    Regular user

  2. #2
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can change the background of the <TD> cell like so:

    Code:
    <TD onmouseover='this.style.background="#000000"';>HELLO!</TD>
    although that will only do the cell not the link. This was brought up the other day and someone created a nifty little javascript function that did this much better (than having to write it over and over...) -- do a search on it...

    You can also do:

    Code:
    <A HREF="link.html"><TD></TD></A>
    but that is not "valid" code (and doesn't work in NS).
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  3. #3
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    nothing I spotted came up previously on a search but will try and narrow it down..

    Also tried the second option but doesn't work in IE6 either!

    Cheers though will give the js a shot, thought that was the best way to do this

    Sarah
    Regular user

  4. #4
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive got it in my subscribed threads somewhere, I'll hunt it out for you
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  5. #5
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    cheers
    Regular user

  6. #6
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  7. #7
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    cheers, didn't help much ended up going back to some old JS that just swaps the bgcolor using onmouseover and onmouseout... very clunky but then my JS is so appalling that there wasn't much chance of me doing anything fancy.

    Only problem being is that my version it doesn't work in NS older version [no surprise there then ] but as long as it functional I am not too worried .

    Anyway cheers for the link I'll keep a hold of it as I agree very useful little piece of code.

    Thanks

    Sarah
    Regular user


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
  •