197 users online (0 members and 197 guests)  

> > > > Hyperlink table cell

  Results 1 to 12 of 12

Related

  1. hyperlink in table cell not working    Forum: HTML Forum
    Replies: 1
  2. Scrollbar in a cell in a table?    Forum: HTML Forum
    Replies: 6
  3. table cell background    Forum: CSS Forum
    Replies: 3
  4. table - cell hyperlinking    Forum: HTML Forum
    Replies: 3
  1. 01-08-2004, 08:59 AM #1
    J-Man
    J-Man is offline
    J-Man's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2003
    Posts
    32

    Hyperlink table cell

    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!!!
    Reply With Quote Reply With Quote
  2. 01-08-2004, 09:09 AM #2
    J-Man
    J-Man is offline
    J-Man's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2003
    Posts
    32
    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>
    Reply With Quote Reply With Quote
  3. 01-08-2004, 01:55 PM #3
    QuietDean
    QuietDean is offline
    QuietDean's Avatar
    Administrator
    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    If its got the word 'badger' in it, its usually by me
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?
    Reply With Quote Reply With Quote
  4. 01-08-2004, 02:55 PM #4
    J-Man
    J-Man is offline
    J-Man's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2003
    Posts
    32
    Quote 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!!!!
    Reply With Quote Reply With Quote
  5. 01-08-2004, 03:08 PM #5
    QuietDean
    QuietDean is offline
    QuietDean's Avatar
    Administrator
    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    no problem. Glad its working.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?
    Reply With Quote Reply With Quote
  6. 06-27-2004, 01:04 AM #6
    silentwf
    silentwf is offline
    silentwf's Avatar
    New User
    Status
    Offline
    Join Date
    May 2004
    Posts
    2

    target

    Is it possible if Hypercells target frames...?
    Reply With Quote Reply With Quote
  7. 06-27-2004, 05:23 AM #7
    QuietDean
    QuietDean is offline
    QuietDean's Avatar
    Administrator
    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    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'
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?
    Reply With Quote Reply With Quote
  8. 07-01-2004, 02:22 AM #8
    silentwf
    silentwf is offline
    silentwf's Avatar
    New User
    Status
    Offline
    Join Date
    May 2004
    Posts
    2
    Thanks ^^"
    Reply With Quote Reply With Quote
  9. 07-30-2004, 09:38 PM #9
    boroarke
    boroarke is offline
    boroarke's Avatar
    New User
    Status
    Offline
    Join Date
    Jul 2004
    Posts
    1
    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
    Reply With Quote Reply With Quote
  10. 07-31-2004, 06:34 AM #10
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733
    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
    Reply With Quote Reply With Quote
  11. 08-26-2004, 05:20 PM #11
    Zach Harkey
    Zach Harkey is offline
    Zach Harkey's Avatar
    New User
    Status
    Offline
    Join Date
    Aug 2004
    Posts
    1
    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>
    Reply With Quote Reply With Quote
  12. 08-26-2004, 10:24 PM #12
    priyanka
    priyanka is offline
    priyanka's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Dec 2003
    Posts
    63
    Quote 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.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread