SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table cells as links

    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
    one-x
    "Simplicity is the key to all things great"

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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';"
    travis

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    one-x
    "Simplicity is the key to all things great"

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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

  6. #6
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    one-x
    "Simplicity is the key to all things great"

  7. #7
    SitePoint Zealot superbrava's Avatar
    Join Date
    Aug 2001
    Location
    Indianapolis, IN
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Steve v3.2.2 running on LocalSuck port 80

  8. #8
    SitePoint Member
    Join Date
    Apr 2002
    Location
    New Zealand
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Abhishek


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •