Hyperlink table cell

**J-Man** · 01-08-2004, 08:59 AM

Is it possible to make a table cell hyperlink to something? Let me explain. I have a form setup where, if I click on a certain word, that word fills a table cell (using CSS, DIV and javascript). However, I want the user to be able to click on that table cell to have a NEW word put in that cell. So, let's say the user clicks on the word "HELLO". Then, the table cell would contain the word "HELLO". If the user now clicks anywhere in the table cell, I want the word "HELLO" (in the cell) to change to "GOODBYE". Also, if the user was to now go back and click on the word "HELLO", I again want the table cell filled with the word "HELLO"...and so on.

Reminder: I have the "click on HELLO to fill the cell with HELLO" working fine...I just need to get the "click in cell to fill with GOODBYE" part working.

There might be a CSS solution to this, but I thought I'd start by posting here. Thanks in advance!!!

**J-Man** · 01-08-2004, 09:09 AM

I think I found the solution (Posted by QuietDean) called HyperCell...well, at least something that I can start with...I haven't tried it yet, but it looks like it might work:

Code:

<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>

**QuietDean** · 01-08-2004, 01:55 PM

If its got the word 'badger' in it, its usually by me

**J-Man** · 01-08-2004, 02:55 PM

Originally Posted by QuietDean

If its got the word 'badger' in it, its usually by me

By the way, I got that to work PERFECTLY (with just minor tweaking to get it to work within my framework)! THANKS!!!!

**QuietDean** · 01-08-2004, 03:08 PM

no problem. Glad its working.

**silentwf** · 06-27-2004, 01:04 AM

Is it possible if Hypercells target frames...?

**QuietDean** · 06-27-2004, 05:23 AM

Yes, it is. In the 'onClick' code, replace 'window' with 'parent.framename'

So if my frame is called 'MAIN' then the onlick is

Code:

parent.MAIN.location.href='http://www.quietdean.com'

**silentwf** · 07-01-2004, 02:22 AM

Thanks ^^"

**boroarke** · 07-30-2004, 09:38 PM

Is there any way to get this same effect without using Javascript? Id like to make my cells hyperlinked but do not want to use Java. Any ideas?
Thanks!
Bryan

**coothead** · 07-31-2004, 06:34 AM

Hi there boroarke,

and a warm welcome to these forums

Is there any way to get this same effect without using Javascript?

Yes there certainly is, try this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript free td link</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
     background:#9900aa;
 }
#container {
     position:absolute;
     left:50%;
     top:50%;
     width:200px;
     margin:-25px 0 0 -100px;
 }
#cell {
     width:200px;
     height:50px;
     border:solid 1px #000000;
 }
a#goog {
     display:block;
     width:200px;
     height:50px;
     background:#000000;
     text-align:center;
     text-decoration:none;
     padding-top:5px;
     font-family:arial;
     font-size:16px;
     color:#ffffff;
 }
a#goog:hover {
     background:#ffffff;
     color:#000000;
 }
/*//]]>*/
</style>

</head>
<body>

<div id="container">
  <table><tr>
   <td id="cell"><a id="goog"href="http://www.google.com"> click the whole cell for google</a></td>
  </tr></table>
</div>

</body>
</html>

coothead

**Zach Harkey** · 08-26-2004, 05:20 PM

A small modification to coothead's css will make the hover area much more flexible.

Code:

#cell {
     width:200px;
     border:solid 1px #000000;
 }

Removed the declared height value to allow the hover area to grow vertically with the cell.

Code:

a#goog {
     display:block;
     width:100%;
     height:100%;
     background:#000000;
     text-align:center;
     text-decoration:none;
     padding-top:5px;
     font-family:arial;
     font-size:16px;
     color:#ffffff;
 }

Changed width and height to 100%. This lets the cell's width and height(which can be flexible) to determine the hover area's boundaries.

So the new example would be:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript free td link</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
     background:#9900aa;
 }
#container {
     position:absolute;
     left:50%;
     top:50%;
     width:200px;
     margin:-25px 0 0 -100px;
 }
#cell {
     width:200px;
     border:solid 1px #000000;
 }
a#goog {
     display:block;
     width:100%;
     height:100%;
     background:#000000;
     text-align:center;
     text-decoration:none;
     padding-top:5px;
     font-family:arial;
     font-size:16px;
     color:#ffffff;
 }
a#goog:hover {
     background:#ffffff;
     color:#000000;
 }
 /*//]]>*/
</style>

</head>
<body>

<div id="container">
	<table>
		<tr>
			<td id="cell"><a id="goog"href="http://www.google.com"> click the whole cell for google<br /><br />which can now grow...<br /><br />even across multiple line breaks<br /><br />not that you should use tons of line breaks, but paragraphs aren't allowed inside links</a></td>
		</tr>
	</table>
</div>

</body>
</html>

**priyanka** · 08-26-2004, 10:24 PM

Originally Posted by J-Man

Is it possible to make a table cell hyperlink to something? Let me explain. I have a form setup where, if I click on a certain word, that word fills a table cell (using CSS, DIV and javascript). However, I want the user to be able to click on that table cell to have a NEW word put in that cell. So, let's say the user clicks on the word "HELLO". Then, the table cell would contain the word "HELLO". If the user now clicks anywhere in the table cell, I want the word "HELLO" (in the cell) to change to "GOODBYE". Also, if the user was to now go back and click on the word "HELLO", I again want the table cell filled with the word "HELLO"...and so on.

Reminder: I have the "click on HELLO to fill the cell with HELLO" working fine...I just need to get the "click in cell to fill with GOODBYE" part working.

There might be a CSS solution to this, but I thought I'd start by posting here. Thanks in advance!!!

Hi there,
If you use FrontPage,I think you can easily do all these. In the normal mode when you create a table,just right click on the table cell where you want to insert hyperlink. You can edit its properties also.

Thread: Hyperlink table cell

Thread Tools

Related

hyperlink in table cell not working Forum: HTML Forum

Scrollbar in a cell in a table? Forum: HTML Forum

table cell background Forum: CSS Forum

table - cell hyperlinking Forum: HTML Forum

Hyperlink table cell

target

Tags for this Thread