Hi there, I'm designing a web page in which I want to change a cell color if the mouse has been within the cell for 2 seconds. Can somebody help me in this one, thanks
Printable View
Hi there, I'm designing a web page in which I want to change a cell color if the mouse has been within the cell for 2 seconds. Can somebody help me in this one, thanks
I didn't add browser compatability, so it's pretty much IE specific:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 7.0">
<TITLE></TITLE>
<script language="javascript" type="text/javascript">
var timeoutId = 0;
var currentCell = "";
var hoverColor = "silver";
var normalColor = "";
var timeoutLength = 2000;
function setCellColor(cellId, color) {
var obj = document.all[cellId];
if (obj != null) {
obj.style.backgroundColor = color;
}
removeTimeout();
}
function cellMouseOver(cellId) {
if (currentCell != "") {
setCellColor(currentCell, normalColor);
}
removeTimeout();
currentCell = cellId;
timeoutId = setTimeout("setCellColor('" + cellId + "', '" + hoverColor + "');", timeoutLength);
}
function cellMouseExit(cellId) {
removeTimeout();
setCellColor(cellId, normalColor);
}
function removeTimeout() {
if (timeoutId != 0) {
clearTimeout(timeoutId);
timeoutId = 0;
}
}
</script>
</HEAD>
<BODY>
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td id="tdCell1" onmouseenter="cellMouseOver('tdCell1');" onmouseleave="cellMouseExit('tdCell1');">Cell 1</td>
<td id="tdCell2" onmouseenter="cellMouseOver('tdCell2');" onmouseleave="cellMouseExit('tdCell2');">Cell 2</td>
</tr>
</table>
</BODY>
</HTML>
Replace onmouseenter with onmouseover, onmouseleave with onmouseout and document.all[id] with document.getElementById(id) and it should work on all important browsers: IE5+, Mozilla, NS6+, Opera 6+, Konqueror and Safari.
Even easier, pass this instead of the cell ids in the event handler and forget about the document.all/document.gEBI completly.
Thank u all for ur help