www.webdeveloper.com
Results 1 to 10 of 10

Thread: Table Highlight

  1. #1
    Join Date
    Jan 2004
    Location
    Leeds, UK
    Posts
    68

    Table Highlight

    I have this code.

    <table border="1" onClick="location.href='main.html';"><tr><td>Main</td></tr></table>

    When a user clicks on the table it will take them to main.html.
    I would like it so that when the user points to anywhere on the table, the table changes colout to green, and when clicked on turns red.

    Any idea?

  2. #2
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    First of all, you need to make the text within the cell a link. What I gave you is java script and will not run for 13% of the internet, so you need this link as a backup. Also, you should not be using a table for this. I suggest using a <div> instead. For border use this code style="border:1px solid #000000;". Now for what you asked
    Code:
    onMouseOver="style.backgroundColor='#ff3300';" onMouseOut="style.backgroundColor='#ffffff';"
    onClick="location.href='main.html';style.backgroundColor='#ff3300';"
    Put that in tag of whatever element you are using, and drop the current 'onClick' atrribute

  3. #3
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    <table> is for tabular data.
    If you need to add a link use <a href="yourlink.html">
    Then you can use :hover pseudo-class to apply different style when a cursor is over the link.

    Your coding approach is akin a surgeon removing tonsils through patient's anus ( I know that is a graphic comparison, but hopefully it will help in understanding the principle )

  4. #4
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    Originally posted by Vladdy
    <table> is for tabular data.
    If you need to add a link use <a href="yourlink.html">
    Then you can use :hover pseudo-class to apply different style when a cursor is over the link.

    Your coding approach is akin a surgeon removing tonsils through patient's anus ( I know that is a graphic comparison, but hopefully it will help in understanding the principle )
    I am the one who gave him that onclick="location.href" code lol. But I told him to put a link within whatever he is using as a container for those without js. Fred and I talked about this method, and we disgussed modifying a normal link with css to appear as if it were a block element.
    http://quasi-ke.servebeer.com/test.html
    here is the code I posted before --^, It runs with js disabled and it runs in lynx... woopy.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title>Block test</title>
    </head>
    <body>
    <div onMouseOver="style.backgroundColor='#cccccc';" onMouseOut="style.backgroundColor='#ffffff';"
    onClick="location.href='ea_games.jpeg';style.backgroundColor='#ff3300';"style="border:1px solid #000000;"><a href="ea_games.jpeg">hi hi hi</a></div>
    </body>
    </html>
    Last edited by PeOfEo; 02-29-2004 at 04:21 PM.

  5. #5
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    Ok, but does not the following achieve the same result (extra div just to satisfy XHTML requirement for no inline elements in the body)
    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" xml:lang="en" lang="en">
    <head>
    <title>Block Anchor</title>
    <style type="text/css">
    a.block
      { display: block;
        border:1px solid #000;
        background:#fff;
      }
    a.block:hover
      { background:#ccc;
      }
    a.block:focus
      { background:#f30;
      }
        
    </style>
    </head>
    <body>
    <div>
    <a class="block" href="ea_games.jpeg"> hi hi hi</a>
    </div>
    </body>
    </html>

  6. #6
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    the one I wrote (I changed the doc type to the same as yours):
    http://quasi-ke.servebeer.com/test.html
    and the one you wrote:
    http://quasi-ke.servebeer.com/test2.html
    At first I was suprised that hover was working in ie, but then I remember, oh yea, you are using a link. I just went with the java script approach because I figured if the browser does not support css the link will still be in a box... without the box the layout might get yucky... but then again if the layout is done in css it is going to break down into a unstyled form anyway.
    Last edited by PeOfEo; 02-29-2004 at 04:41 PM.

  7. #7
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    Originally posted by PeOfEo
    <snip />I just went with the java script approach because I figured if the browser does not support css the link will still be in a box... without the box the layout might get yucky.
    ... err... if the browser does not support CSS (and the site is designed correctly) the layout does not matter anymore i.e. there will be no box...

  8. #8
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    I just edited my post with that right before you posted lol.
    Last edited by PeOfEo on 02-29-2004 at 04:41 PM

  9. #9
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195

    Thumbs up

    LOL

  10. #10
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    So what have we learned today? Two ways to acheive the same effect and either way seems to be accessable. Even though fred mentioned that using location.href could be considered a w3 standard violation since the block element would be inside of a link sort of....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles