title: Why doesn't my Overlay function work in my browser
body: <p>i use a google chrome as my browser
  and this my web page source</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;/head&gt;
  
  &lt;script type="text/javascript"&gt;
  function createOverlay() {
      var div = document.createElement("div");
      div.innerHTML = "your own code here";
      div.id = "overlay";
      div.display = "none";
      div.style.position = "absolute";
      div.style.border = "1px solid";
      document.body.appendChild(div);
  }
  
  //this function show layout
  function showOverlay(el) {
      if (!document.getElementById("overlay")) createOverlay();
      var div = document.getElementById("overlay");
      div.style.display = "block";
      div.style.width = "200px";
      div.style.height = "200px";
      div.style.backgroundColor="FFFF"
      div.style.top = el.offsetTop + 40 + "px";
      div.style.left = parseInt(el.offsetLeft) + parseInt(div.style.width) / 2 + "px";
      div.onmouseover = function (event) {
          event.stopPropagation();
          return false;
      };
  }
  
  // and this function hide - you can use it for "close" button on overlay
  function hideOverlay() {
      document.getElementById("overlay").style.display = "none";
  }
  
  //here is the code which add event handlers to td elements of your table
  var table = document.getElementsByTagName("table")[0];
  var tds = table.getElementsByTagName("td");
  var flag = true;
  if (document.getElementById("overlay")) {
      if (document.getElementById("overlay").style.display != "none") flag = false;
  }
  for (i in tds) {
      tds[i].onmouseover = function (event) {
          if (flag) {
              showOverlay(this);
              event.stopPropagation();
          } else {
              return false;
          }
      };
  }
  &lt;/script&gt;
  &lt;body&gt;
  &lt;div&gt;
  &lt;table width="1023" height="248" border="1"&gt;
    &lt;tr&gt;
      &lt;th colspan="2" scope="col"&gt;A1&lt;/th&gt;
      &lt;th colspan="2" scope="col"&gt;A2&lt;/th&gt;
      &lt;th colspan="2" scope="col"&gt;A3&lt;/th&gt;
      &lt;th colspan="2" scope="col"&gt;A4&lt;/th&gt;
      &lt;th colspan="2" scope="col"&gt;A5&lt;/th&gt;
      &lt;th colspan="2" scope="col"&gt;A6&lt;/th&gt;
      &lt;th colspan="2" scope="col"&gt;A7&lt;/th&gt;
      &lt;th colspan="2" scope="col"&gt;A8&lt;/th&gt;
      &lt;th colspan="2" scope="col"&gt;A9&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="center"&gt;A1.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A1.8&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A2.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A2.8&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A3.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A3.8&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A4.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A4.8&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A5.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A5.8&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A6.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A6.8&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A7.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A7.8&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A8.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A8.8&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A9.4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A9.8&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="center"&gt;A1.3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A1.7&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A2.3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A2.7&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A3.3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A3.7&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A4.3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A4.7&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A5.3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A5.7&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A6.3
      &lt;/div&gt;
      &lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A6.7&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A7.3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A7.7&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A8.3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A8.7&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A9.3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A9.7&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="center"&gt;A1.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A1.6&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A2.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A2.6&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A3.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A3.6&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A4.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A4.6&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A5.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A5.6&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A6.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A6.6&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A7.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A7.6&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A8.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A8.6&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A9.2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A9.6&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="center"&gt;A1.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A1.5&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A2.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A2.5&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A3.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A3.5&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A4.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A4.5&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A5.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A5.5&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A6.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A6.5&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A7.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A7.5&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A8.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A8.5&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A9.1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div align="center"&gt;A9.5&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>when i try that in demo here <a href="http://jsfiddle.net/andricoga/yTj8K/" rel="nofollow">http://jsfiddle.net/andricoga/yTj8K/</a> it's work. But when I try that in local host nothing change just a table shown. my java script doesn't work.
  any idea what the problem. please advise</p>