Highlighting a <td>...

**hpnadig** · Oct 25, 2003 12:17

how do I change the background (make it dynamic) of <td> when user places mouse pointer on it? and when clicked on it?

I came upon a method where they've used 'onmouseover', 'onmouseout', etc and have written a function in javascript to replace the background color.

<td onmouseover=(function.... ) >

(I tried to find out how they've done on phpmyadmin.. but couldn't exactly get the method..

**deluks** · Oct 25, 2003 18:04

if you do not care about (stupid) ie users, you can do it just with css:

td { background: #00f; }
td:hover { background: #f00; }

**adios** · Oct 27, 2003 11:38

Most internet user are 'IE users'. If you want no users, that's the right attitude.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<style type="text/css">

table {
	width: 600px;
	height: 80px;
	border-collapse: collapse;
}

td {
	width: 50%;
	height: 50%;
	border: 1px black solid;
	text-align: center;
}

a:link.cell, a:visited.cell, a:hover.cell, a:active.cell {
	display: block;
	width: 100%;
	height: 100%;
	background : purple;
	font: 20px "comic sans ms";
	color: purple;
	text-decoration: none;
}

a:hover.cell {
	background: violet;
}


</style>
</head>
<body>
<table>
<tr>
<td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
<td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
</tr><tr>
<td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
<td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
</tr>
</table>
</body>
</html>

**deluks** · Oct 27, 2003 13:27

Most internet users are stupid and use the worst browser ever. Ie just ignores w3c. This really sucks.

just my 2 cents about ie...

**Scud** · Oct 27, 2003 16:18

don't mistake stupidity with un-educated. Many people are not educated in other browser options. Don't blame them, blame Microsoft.

**deluks** · Oct 27, 2003 16:30

Everybody who is engaged in designing websites, should know about w3c.
But they don't care about the standards. "it looks good with ie, thats all i need".
Yes ok to call them stupid may be a bit hard, but sometimes i really become angry.

**adios** · Oct 27, 2003 18:27

Originally Posted by deluks

Most internet users are stupid and use the worst browser ever. Ie just ignores w3c. This really sucks.

just my 2 cents about ie...

Welll...someday - when you've got more than 2¢ on the line - you might become less obsessed with 'standards' - and more with 'eyeballs'.

:

**deluks** · Oct 27, 2003 19:04

if ie interpretated valid css as good as mozilla or opera does, there wouldn't be any incompatibilities between a website and the different browsers

**BoldScripts** · Oct 28, 2003 00:03

but until it does, here we are..

**hpnadig** · Oct 29, 2003 16:24

Originally Posted by BoldScripts

but until it does, here we are..

well, we need not wait for it to change.. infact, we should change! ( change our browser

**DaveMaxwell** · Oct 30, 2003 07:35

Originally Posted by deluks

Everybody who is engaged in designing websites, should know about w3c.
But they don't care about the standards. "it looks good with ie, thats all i need".

Most companies/gov't agencies use IE X.X (may vary depending on the company) as their standard and that's what they expect their sites to be coded to work with. Working with standards is great, but you still need to meet your minimal requirements of the organization you work with.

**lord** · Nov 4, 2003 16:56

Heya

Nice trick

Is it possible to do something like this on <tr> - line
So when I move acros my table whole line will be colored/selected; not just the cell??

thanx in advance & sitepoin roxs

Originally Posted by adios

Most internet user are 'IE users'. If you want no users, that's the right attitude.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<style type="text/css">

table {
	width: 600px;
	height: 80px;
	border-collapse: collapse;
}

td {
	width: 50%;
	height: 50%;
	border: 1px black solid;
	text-align: center;
}

a:link.cell, a:visited.cell, a:hover.cell, a:active.cell {
	display: block;
	width: 100%;
	height: 100%;
	background : purple;
	font: 20px "comic sans ms";
	color: purple;
	text-decoration: none;
}

a:hover.cell {
	background: violet;
}


</style>
</head>
<body>
<table>
<tr>
<td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
<td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
</tr><tr>
<td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
<td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
</tr>
</table>
</body>
</html>

**adios** · Nov 5, 2003 00:06

Not without CSS2 (as in !MSIE

). Need JS:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

th      {
         background: ghostwhite;
        }
tr.out  {
         background: orange;
         cursor: pointer;
        }
tr.over {
         background: darkorange;
         cursor: pointer;
        }

td      {
         font: 16px verdana;
         color: #fff;
         text-align: center;
        }

</style>
<script type="text/javascript" language="javascript">

function setTR_onmouseovers() //register handlers
{
	var row, rows, i = 0, feh = document.getElementById('feh');
	rows = feh.rows;
	while (row = rows.item(i++))
	{
		if (row.className == 'out') //all class="out" rows get this
		{
			row.onmouseover = function()
			{
				this.className = 'over';
			}
			row.onmouseout = function()
			{
				this.className = 'out';
			}
			row.onclick = function() //help yourself
			{
				alert('click');
			}
		}
	}
}

onload = setTR_onmouseovers;

</script>
</head>
<body>
<form>
<table id="feh" cellspacing="2" cellpadding="4" border="1">
<thead>
<tr>
<th>header</th><th>header</th><th>header</th><th>header</th><th>header</th><th>header</th>
</tr>
</thead>
<tbody>
<script type="text/javascript" language="javascript">

var count = 1;
for (var iLoop = 0; iLoop < 8; ++iLoop) //saves space!
	document.write (
			'<tr class="out">' ,
			'<td>cell ' + count++ + '</td><td>cell ' + count++ + '</td>' ,
			'<td>cell ' + count++ + '</td><td>cell ' + count++ + '</td>' ,
			'<td>cell ' + count++ + '</td><td>cell ' + count++ + '</td>' ,
			'</tr>'
			);

</script>
</tbody>
</table>
</form>
</body>
</html>

Note: this will only work if your table is named "feh".

**johno** · Nov 5, 2003 03:10

Try this one: http://www.fczbkk.com/js/tablemagic/index.html

User Tag List

Thread: Highlighting a <td>...

Thread Tools

Display

Highlighting a <td>...

Bookmarks

Bookmarks

Posting Permissions