PDA

Click to See Complete Forum and Search --> : Table Highlight

ianripping
02-29-2004, 02:22 PM
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?
PeOfEo
02-29-2004, 03:13 PM
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

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
Vladdy
02-29-2004, 03:15 PM
<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 (:D :D :D I know that is a graphic comparison, but hopefully it will help in understanding the principle :D :D :D )
PeOfEo
02-29-2004, 03:17 PM
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 (:D :D :D I know that is a graphic comparison, but hopefully it will help in understanding the principle :D :D :D ) 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.

<!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>
Vladdy
02-29-2004, 03:29 PM
Ok, but does not the following achieve the same result (extra div just to satisfy XHTML requirement for no inline elements in the body)
<!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>
PeOfEo
02-29-2004, 03:38 PM
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.
Vladdy
02-29-2004, 03:41 PM
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... ;)
PeOfEo
02-29-2004, 03:42 PM
I just edited my post with that right before you posted lol.
Last edited by PeOfEo on 02-29-2004 at 04:41 PM
Vladdy
02-29-2004, 03:43 PM
LOL
PeOfEo
02-29-2004, 03:45 PM
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....