Table cells as links

**one-x** · Dec 25, 2002, 20:52

Hi,

I'm new here but this seems THE best forum for learning on.

Basically my question is this.

I have a table which when you rollover it changes CSS and roll out it changes back. I would like the entire cell to link on click.

The code for it so far is as below.

<td class="Style1" onMouseOver="this.className='Style2';" onMouseOut="this.className='Style1';" onClick="document.open='1233.html';"

i'm not sure whats wrong lol. Its just a test page thus the test link and styles.

If someone could put the entire cell code in which'll work i'd really appreciate it.

Cheers guys

**podlob** · Dec 25, 2002, 22:19

this line is wrong...
document.open='1233.html';

if you want the link to open in a new window use...

Code:

onclick="window.open('somepage.html');"

or if you want it to load in the same window use...

Code:

onclick="location.href='somepage.html';"

**beetle** · Jan 3, 2003, 08:16

I'm not sure of your intentions with this, but I'd advise against using this for any website application. Search engines cannot spider links made this way, nor can users with javascript disabled navigate them.

Might I suggest an article for you to read?

**one-x** · Jan 3, 2003, 16:01

Thanks but i'm not at all bothered about my site being subjected to a search by any search engine. Also, anyone who has Javascript disabled is one strange person. There's not one person I know who has it disabled unless they are a complete security freak but hey.

Thanks anyway.

**vgarcia** · Jan 3, 2003, 16:27

Originally posted by one-x
Thanks but i'm not at all bothered about my site being subjected to a search by any search engine. Also, anyone who has Javascript disabled is one strange person. There's not one person I know who has it disabled unless they are a complete security freak but hey.

Thanks anyway.

I tend to disable javascript for popup windows. They're very annoying when traversing some sites. Thanks Mozilla!

--Vinnie

**one-x** · Jan 3, 2003, 18:09

Thats a good reason for disabling Javascript but I use a browser which blocks popups automatically (and it actually blocks all popup adverts) and to make it even better, its basically Internet Explorer inside, so it supports everything and there's the option to have all browsing windows within this program or to have them as normal when using Internet Explorer.

**superbrava** · Jan 9, 2003, 15:22

what about doing it this way?

Code:

<html>
<head>
<style type="text/css">

.Style1 {		width: 150px;
			height: 25px;
			background: #CC6600;}

.Style2 {		width: 150px;
			height: 25px;
			background: #CC0000;}

</style>
</head>
<body>

<table>
<tr>
<td class="Style1" onMouseOver="this.className='Style2';" onMouseOut="this.className='Style1';" onClick="window.location.href='?page=News';"><a href="?page=News">Some File</a></td>
</tr>
</table>

</body>
</html>

That way you have a normal link, and a cell onClick() that will take you to the same place.

**Abhishek Reddy** · Jan 9, 2003, 19:10

You could even do it entirely with CSS:

Code:

.link-button  {
    display: block;
    width: 150px;
    height: 25px;
    background: #CC6600;
}

.link-button:hover  {
    display: block;
    width: 150px;
    height: 25px;
    background: #CC0000;
}

Code:

<a href="1233.html" class="link-button">Link text</a>

Or, if you insist on using tables, you can use display: block for the cell style, which will then allow you to use :hover for the table cell itself.

The SitePoint Forums have moved.

User Tag List

Thread: Table cells as links

Thread Tools

Display

Table cells as links

Bookmarks

Bookmarks

Posting Permissions