PDA

View Full Version : Function Problem

spencerhurst
10-06-2005, 08:37 AM
I have created some code and manipulated it using JavaScript by changing elements of CSS using the DOM. It's basically a slide down menu which is just a table within a <DIV> tag linked to other pages. Nice and simple. However, I would like to change this slightly more so that when the user hovers over a specific cell within the table the background color of that cell changes slightly. I would like to be able to do this using only one function rather than a seperate function for each cell. Having spoke to some people i know they have told me to use the getElementByID method, but, being new to this, i haven't a clue where to start. Does anybody have any suggestions on how to do this?

Regards

Sp@nky :)
Kor
10-06-2005, 08:52 AM
it might be done using CSS only. Unfortunately, IE has not yet implemented the whole CSS w3c recomadation, so that it will not accept hover method but upon the links.

Anyway, coming back to the javascript methods... Elements can be referenced not only by their id, but also by their tag name and/or their index reported at their parent:

For instance, if you have a table and you want to apply a method upon all the cells of that table, you may do this:

- give table an id
<table id="mytable">
...

- build a collection of all the cells of the table and circle through

var myCells = document.getElementById('mytable').getElementsByTagName('td')
for(var i=0;i<myCells.length;i++){
...do something with each cell myCell[i] ...
}
spencerhurst
10-06-2005, 11:16 AM
Tahkns for the reply, it was very helpful and i actually learned from it aswell. However, the solution doesn't give me the outcome i was hoping for, maybe I wasn't clear enough in my original post. Say i have a table, 'myTable', within a layer, 'myLayer'. The table has a background color of black, how do i with only one function get the cell that the user is hovering over to go white and keep the others black, is this possible?

Regards

Sp@nky
Kor
10-06-2005, 11:32 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var cOn ='#ffffff';
var cOff='#000000';
onload=function(){
var oCels = document.getElementById('myTable').getElementsByTagName('td');
for(var i=0;i<oCels.length;i++){
oCels[i].onmouseover=function(){
this.style.backgroundColor=cOn;
}
oCels[i].onmouseout=function(){
this.style.backgroundColor=cOff;
}
}
}
</script>
<style type="text/css">
<!--
#myTable td{
background-color:#000000;
}
-->
</style>
</head>
<body>
<table id="myTable" width="100" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</body>
</html>