Table/cell Link?

Pages: 1, 2
free web hosting
Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

Table/cell Link?

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.

Reply

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.

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>


try this...

Reply

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

Reply

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.

CODE

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

 

 

 


Reply

no9t9
actually, I just realized where it says
CODE

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.

Reply

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.

Reply

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

Reply

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)

Reply

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.

Reply

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

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Pages: 1, 2
Recent Queries:-
  1. linking table cells css html - 17.61 hr back. (1)
  2. table cell link - 18.95 hr back. (1)
  3. table cell as link html - 20.87 hr back. (1)
  4. how to link to different cell in html table - 28.02 hr back. (1)
  5. html "table cell image link" - 31.19 hr back. (1)
  6. html "table cell link" - 31.22 hr back. (1)
  7. html table cell link - 34.69 hr back. (1)
  8. table cell as link - 39.96 hr back. (1)
  9. how to link table cell in html - 41.01 hr back. (1)
  10. how to link table cells - 42.08 hr back. (1)
  11. html table as link - 45.79 hr back. (1)
  12. html link whole table cell - 58.57 hr back. (1)
  13. html make a table a link - 60.09 hr back. (1)
  14. make table html link - 67.21 hr back. (1)
Similar Topics

Keywords : table, cell, link

  1. Creating Link In Html - Help Me With This!
    (5)
  2. Refresh Main Window By Clicking Link In Popup?
    (2)
    This is another refresh problem question. The project I'm doing uses tons of frames (I know,
    some of you will probably advise me not to use frames) and I'm having problems with refreshing
    the target frames. The problem is, I have a main page (main.html) that is a popup (so that I
    don't see the address bar and the other toolbar bits in my browser) and there are links in that
    page that when clicked also pops up a page. What I don't know is how to refresh the main page
    using a link in the other popup page. I've tried using this but this only works f....
  3. Populating A Form From A Link
    (5)
    I have an online application Form that multiple groups use from their own webpages. I would like the
    form to automatically populate a couple fields depending on which group's site it's clicked
    from......... I think there is a way to populate a form just by adding stuff to the link, but I
    don't know how and I can't find any information on how online (not really sure what to
    search)......... anyone know? I want a combo-box and a text field automatically populated with
    information depending on the link that's clicked. I honestly don't know if this i....
  4. Making A Refresh Link On Your Website.
    refresh local webpage (16)
    /smile.gif' border='0' style='vertical-align:middle' alt='smile.gif' /> post it on ur website
    CODE <a href="javascript:this.location.reload();" style="color:
    #000000; font-weight: normal">refresh</a> It can refresh local webpage. U
    can add it at ur forum so that each topic u are reading can be refresh easily. If ur website
    return to homepage after pressing I.E. refresh button, then u must need this coding. /cool.gif'
    border='0' style='vertical-align:middle' alt='cool.gif' /> Beacus visitors only w....
  5. Link To Create Desktop Shortcut?
    (5)
    Is there a way to make a link that actually creates a desktop shortcut? I have a page that gives
    links to files on our intranet but I know of people who try and make shortcuts for these files. It
    would be nice if I could put a link next to the link for the file that would make a shortcut. Use
    a more descriptive topic title next time. ....
  6. Dropdown Menus Links
    IDK how to make them link (3)
    Ok its a big problem to me, i need to make my drop down menus options link to a web page. I know i
    can do it with a button, and i can get that to work but i need/want to have it link as soon as the
    option is selected........How do i do that?....
  7. Link Colour
    (5)
    Hey all, i dont know how easy this is to do or whether it can be done just using HTML or whatever.
    Basically i have 2 seperate navigation bars top nav bar is the parent navigation bar. when you
    hover over any of the entries in this parent bar it dynamically updates the second nav bar. what i
    ideally want is to highlight the parent link in black when i move the mouse over it BUT stay black
    until i select/ hover over another parent link. does that make sense? ....
  8. A Good Space For Learn Html
    web site link (5)
    Hi i find this web site you can learn html lan very fast and very easy woow i found it many
    tutorials go http://www.w3schools.com/ its really good website /rolleyes.gif' border='0'
    style='vertical-align:middle' alt='rolleyes.gif' /> ....
  9. Expanding Link
    (12)
    Wee... Another question: How can I make that clicking on a specific link expand to something?
    Well... Here's an example: I have a list with the 5 best sites: Site 1 {more info} site 2 {more
    info} etc. Clicking on {more info} for site 1, will show a description below the link, and now, site
    2 will be below the description. I hope you understand my question /tongue.gif' border='0'
    style='vertical-align:middle' alt='tongue.gif' /> ....
  10. Fade Link Color
    (4)
    hi, how do you make the linkcolor fade to another color when pointing your cursor to the link?
    It's a rather short description of my question, but i hope it's clear /cool.gif'
    border='0' style='vertical-align:middle' alt='cool.gif' /> . More tips and tricks are welcome.......

    1. Looking for table, cell, link

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for table, cell, link

*MORE FROM TRAP17.COM*
advertisement



Table/cell Link?



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE