HTML Table and Mouseover

itHighway · January 30th, 2006, 08:38 AM

Hello,

How can I track using mouse over function that on which "<TD>" of a HTML table mouse is on.

Suppose: when mouse is on first "<td>" an alert message appear that "You are on first td", when I take the mouse to second "<td>" an alert message appear that "You can on second td".

Thank you,
Zeeshan Ahmed

interrupt · January 30th, 2006, 09:18 AM

Hello itHighway,

Try this:

<table cellspacing =0 cellpadding =0 border = 1 bordercolor = "#8EE5EE"><tr><td id = "1" onmouseover = "javascript:alert('You are on cell number ' + this.id)">Cell 1</td><td id = "2" onmouseover = "javascript:alert('You are on cell number: ' + this.id)">Cell 2</td></tr></table>

HTH
Cheers
Joe

interrupt · January 30th, 2006, 12:01 PM

I was bored so I made this. Might be a bit better than the last example.

<table cellspacing =0 cellpadding =0 border = 1 bordercolor = "#8EE5EE">

<tr>
<td bgCol = "#8EE5EE" id = "1" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">01</td>
<td id = "2" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">02</td>
<td id = "3" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">03</td>
<td id = "4" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">04</td>
<td id = "5" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">05</td>
</tr>
<tr>
<td id = "6" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">06</td>
<td id = "7" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">07</td>
<td id = "8" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">08</td>
<td id = "9" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">09</td>
<td id = "10" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id,this.bgCol)" onmouseout = "changeColBack(this.id)">10</td>
</tr>
<tr>
<td id = "11" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">11</td>
<td id = "12" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">12</td>
<td id = "13" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">13</td>
<td id = "14" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">14</td>
<td id = "15" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id,this.bgCol)" onmouseout = "changeColBack(this.id)">15</td>
</tr>
<tr>
<td id = "16" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">16</td>
<td id = "17" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">17</td>
<td id = "18" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">18</td>
<td id = "19" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id, this.bgCol)" onmouseout = "changeColBack(this.id)">19</td>
<td id = "20" bgCol = "#8EE5EE" onmouseover = "checkNo(this.id,this.bgCol)" onmouseout = "changeColBack(this.id)">20</td>
</tr>

</table>

<br><input type = "text" id = "change" size = 14><br><br>

<script language ="javascript">
function checkNo(theId, theColor){

    var theInput = document.getElementById("change")
    var theCell = document.getElementById(theId).style.backgroundCol or = theColor

        theInput.value = "Cell Number: " + theId

}

        function changeColBack(theId)
                    {
                    var theTd = document.getElementById(theId)
                    theTd.style.backgroundColor = "white"
                    }

</script>

Cheers!
Joe

Imar · January 30th, 2006, 01:17 PM

Or you can use dynamically assigned functions and save yourself from typing and maintaining a lot of markup:

Code:

<html>
<head>
  <title>Dynamic Mouse Overs</title>
  <script type="text/javascript">
    function DoAlert(theId)
    {
      document.getElementById(theId).style.backgroundColor = "green";
      var changeField = document.getElementById("change");
      // Uncomment next line to get an alert box
      //alert('You moused over ' + theId);
      changeField.value = theId;
    }

    function RestoreBGColor(theId)
    {
      document.getElementById(theId).style.backgroundColor = "white";
    }

    function Initialize()
    {
      if (document.getElementById)
      {
        var tds = document.getElementById("MyTable").getElementsByTagName("td");
        for (i=0; i < tds.length; i++)
        {
          node = tds[i];
          if (node.nodeName.toLowerCase() == "td")
          {
            node.onmouseover = function()
            {
              DoAlert(this.id);
            }
            node.onmouseout=function()
            {
              RestoreBGColor(this.id);
            }
          }
        }
      }
    }
  </script>

</head>

<body onload="Initialize();">
<table cellspacing="0" cellpadding="0" border="1" 
     bordercolor="#8EE5EE" id="MyTable">
<tr>
  <td id="1">01</td>
  <td id="2">02</td>
  <td id="3">03</td>
  <td id="4">04</td>
  <td id="5">05</td>
</tr>
<tr>
  <td id="6">06</td>
  <td id="7">07</td>
  <td id="8">08</td>
  <td id="9">09</td>
  <td id="10">10</td>
</tr>
<tr>
  <td id="11">11</td>
  <td id="12">12</td>
  <td id="13">13</td>
  <td id="14">14</td>
  <td id="15">15</td>
</tr>
<tr>
  <td id="16">16</td>
  <td id="17">17</td>
  <td id="18">18</td>
  <td id="19">19</td>
  <td id="20">20</td>
</tr>
</table>
<br /><input type="text" id="change" size="14" />


</body>
</html>

(I was bored too).

Cheers,

Imar

itHighway · January 30th, 2006, 02:05 PM

Thank you very much Guys. Your functions worked great :)