13 replies to this topic

[Amezis]

Well, I actually don't know what it is. But I need a code where you can click everywhere on the table, not only on the text/image.

[OpaQue]

Ahh.. I see. I know what you are talking about. A TEXT in a TD cell and just hovering on that CELL and clicking will activate that link.

That is a cool effect and looks nice.

<table name="badger">
<tr>
<td class="row1" width="100%" style="cursor:hand; padding: 30px; border: 1px solid black;"  onclick="window.location.href='linked_page.html'">THIS IS CONTENT</td>
</tr>
</table>

try this...

[Amezis]

Yeah! That's exactly what I need, but with a mouseover effect! (changing colour)

[no9t9]

While Opaque's solution will work, it is not ideal since it uses javascript and some people turn off javascript. I am assuming you are asking this because you are thinking of designing a menu system with a table. I would do it through CSS rather than javascript. CSS is better because all modern browsers will display this properly.

<style>
a.menu:link {display:block;width:100%;background:white}
a.menu:visited {display:block;width:100%;background:white}
a.menu:hover {display:block;width:100%;background:blue}
a.menu:active {display:block;width:100%;background:white}
</style>
<table border=1 width=100 cellpadding=0 cellspacing=0>
<tr><td><a href="link1.html" class=menu>1</a></td></tr>
<tr><td><a href="link2.html" class=menu>2</a></td></tr>
<tr><td><a href="link3.html" class=menu>3</a></td></tr>
<tr><td><a href="link4.html" class=menu>4</a></td></tr>
</table>

you can modify the CSS so that the colors and the look is right for you.

[no9t9]

actually, I just realized where it says

a.menu:hover {display:block;width:100%;background:blue}

you sould change the BLUE to some other color because the link color is automatically BLUE and you won't see the link when you hover over it. Just letting you know in case you try the code and see it doesn't work.

There are many things you can change using CSS. It is very powerful.

[Amezis]

I liked the code. But there's one problem left:
The height is 75px. It's not used in a menu, but in a content.
So it will only hover when I click the beside the text, not below or above.

[no9t9]

just add "height:100%" to all the stuff in the style area.

[Amezis]

It don't work. The only thing that changed is:
In firefox, the text is in the middle(nothing changed), in IE, it's on the top.

I want the text in the middle, and the whole cell has the hover effect/link. Now, only the width of the text has the hover effect (almost nothing changed)

[no9t9]

the code works. you must have done something wrong. But the only thing it will not do is center it. do you have a link I can see where you want to use this? And what is in your table? That would be easier. Cause in order to center it you might have to do it with padding.

[Amezis]

Well, it works now. But it's still not in the middle of the cell, only centered