Click to See Complete Forum and Search --> : Please Can Anyone Help?


giggledesign
12-08-2003, 02:26 PM
I have a simple table with 5 cells that are to be used as buttons. When you hover on a cell I need that cell to highlight. Then when you hover over another cell, I need it to return to its normal color and highlight the selected cell. Any help would be greatly appreciated.

i did use a script but it only worked in Internet Explorer.
i need a script that will work in Mozilla. this was my old script:


CODE:

<script type="text/javascript">function changeto(highlightcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
</script>


/CODE




does anyone have any ideas. help would be gratefully appreciated.

requestcode
12-08-2003, 02:58 PM
Here is an example that changes the color and text when you mouseover and mouseout of a table cell. Maybe it will help:
<html>
<head>
<title>Table Cell Color Change</title>
<script language="JavaScript">
function chgtabcolor(name,bcolor,txt)
{
if(document.getElementById)
{
elm=document.getElementById(name.id)
elm.style.backgroundColor=bcolor
var newText = document.createTextNode(txt)
elm.replaceChild(newText, elm.childNodes[0])
}
}
</script>
</head>
<body>
<table align="center" border="1" width="200" height="120" cellspacing="0" cellpadding="0">
<tr>
<td id="cell1" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'lightgreen','World')" onmouseout="chgtabcolor(this,'white','Hello')"> Hello </td>
<td id="cell2" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'red','World')" onmouseout="chgtabcolor(this,'white','Hello')"> Hello </td>
<td id="cell3" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'yellow','World')" onmouseout="chgtabcolor(this,'white','Hello')">Hello</td>
</tr>
<tr>
<td id="cell4" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'lightgreen','World')" onmouseout="chgtabcolor(this,'white','Hello')"> Hello </td>
<td id="cell5" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'red','World')" onmouseout="chgtabcolor(this,'white','Hello')"> Hello </td>
<td id="cell6" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'yellow','World')" onmouseout="chgtabcolor(this,'white','Hello')">Hello</td>
</tr>
</table>
</body>
</html>