How to make cells in my table mouseover effect
Posted: Sat Mar 13, 2010 1:42 pm
Hello friends, please i need the cells in my table to respond to mouseover. how do i do this.
regards
regards
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
Code: Select all
td:hover { background-color: #fff; }Code: Select all
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="./behavior.js"></script>
</head>
<body>
<table id="colorful">
<tbody>
<?php for ($row = 0; $row < 10; $row++) : ?>
<tr>
<?php for ($col = 0; $col < 10; $col++) : ?>
<td><?php
// Displays the column and row number in the cell
printf('%02u:%02u', $row, $col);
?></td>
<?php endfor; ?>
</tr>
<?php endfor; ?>
</tbody>
</table>
</body>
</html>Code: Select all
/* JavaScript */
// This will happen after the document elements have been created
window.onload = function () {
// Gets all of the elements to be modified (all cells in the table)
var tds = document.getElementById('colorful').getElementsByTagName('td');
// Tracks how many cells have been moused over
var counter = 0;
// Loops through the elements
for (var i = 0; i < tds.length; i++) {
// Applies an onmouseover event attribute
tds[ i ].onmouseover = function () {
// "this" refers to tds[ i ]
this.style.color = 'white';
this.style.backgroundColor = 'gray';
// Changes the cell content and increments the counter
this.innerHTML = counter++;
}
// Applies an onmouseout event attribute
tds[ i ].onmouseout = function () {
this.style.color = 'blue';
this.style.backgroundColor = 'silver';
}
}
}Code: Select all
<td onclick="alert('Hello, I am Cell 123.'); alert('You look familiar...');">123</td>