td onclick 2

[blitzer]

Hello All. I like how the CNN.com website has a menu which changes colors with onmouseover but the really cool thing is how you can click anywhere in the td box and it goes to the link.. rather than the usual where you can only click the text. Is there an easy way to do this?

 

[starway]

<style>
a.menu { display: block; width: 100px; background-color: blue; }
a.menu:hover {background-color: green }
</style>

. . .

<td><a href=&quot;#&quot; class=&quot;menu&quot;>link 1</a></td>

. . .

The key is to us &quot;display: block&quot; - this will create the active link area.

 

[blitzer]

thanks but not quite what I was looking for.. I'm looking for something where if you click anywhere in the <td> box you get a link. Like on cnn.com

 

[deecee]

a.submenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
display: block;
height: 20px;
width: 125px;
text-align: left;
vertical-align: middle;

just make the height and with = the table that the links are in then just assing the class to the links
sleep is good

 

[deecee]

o i forgot to add for the rollover add this as well

.submenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
display: block;
height: 20px;
width: 125px;
text-align: left;
vertical-align: middle;
background-color: #006666;

change the background to whatever you want
sleep is good

 

[xutopia]

no no no no no and no. I believe what blitzer is talking about is a full TD not only a link.

Here is how you can do it :

<style>
.on { background-color: Teal ; cursor: pointer ;}
.off { background-color: Gray ; }
</style>

<table>
<tr>
<td onmouseover=&quot;this.className='on'&quot; onmouseout=&quot;this.className='off'&quot; class=&quot;off&quot;>Clickable TD</td>
</tr>
</table>

I hope this helps. Gary

http://www.xutopia.com

Haran

 

[deecee]

yes he wants to make the whole cell a link.....you would have to block it off...and i made a mistake my classes should be a.submenu and the secone one should be a.submenu:hover
sleep is good

 

[hads]

Just to add to the lovely peice by xutopia, the link part would be onclick=&quot;document.location.href='

http://www.example.com/';&quot;

Hope this helps.
01101000011000010110010001110011

 

[xutopia]

thanks hads. A star for you for correcting my mistake(in the spirit of perfection I give stars to anyone who tells me I am wrong).

I could have sworn I had put that onclick in there somewhere! Gary

http://www.xutopia.com

Haran

 

[starway]

blitzer, if you had tested my proposal you could see that [tt]display: block[/tt] does what you want. Just change the link area size using [tt]width | height[/tt] properties to the desired values.

 

[hads]

Aggreed, I like that way of doing it too starway. It's nice and clean and doesn't involve any javascript. I have used it on a site.

Doesn't it fall over in NS 4 and I also had problems with it on IE Mac?
01101000011000010110010001110011

 

[starway]

Exactly, the whole point is that it's pure CSS without any scripting at all. Unfortunately, it doesn't work in N4 (therefore I use it only when I'm 100% sure that it's non-N4 environment). But <td onclick> doesn't work there as well.
As for IE on Mac - I tested it on IE5, and it worked as expected.

 

[blitzer]

I'm using the xutopia / hads suggestion because in my <td> bar there is more than just text links.. anyway thanks to everyone for their help!

 

[hads]

My apologies, I didn't read your first post clearly enough starway. I did not realise you had enclosed the <a> inside a <td>.

When I had problems with IE (mac ver.?) and NS4 it was because of them not recognising the display:block and displaying them as inline elements instead which degraded poorly. With the <a> inside a <td> it doesn't effect the layout as such and is a better solution.

Although this doesn't apply to blitzer if he has a <td> full of all sorts of things.
01101000011000010110010001110011

 

[deecee]

is my post off earlier off?
sleep is good