i use a google chrome as my browserand this my web page source\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><script type="text/javascript">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 layoutfunction 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 overlayfunction hideOverlay() { document.getElementById("overlay").style.display = "none";}//here is the code which add event handlers to td elements of your tablevar 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.onmouseover = function (event) { if (flag) { showOverlay(this); event.stopPropagation(); } else { return false; } };}</script><body><div><table width="1023" height="248" border="1"> <tr> <th colspan="2" scope="col">A1</th> <th colspan="2" scope="col">A2</th> <th colspan="2" scope="col">A3</th> <th colspan="2" scope="col">A4</th> <th colspan="2" scope="col">A5</th> <th colspan="2" scope="col">A6</th> <th colspan="2" scope="col">A7</th> <th colspan="2" scope="col">A8</th> <th colspan="2" scope="col">A9</th> </tr> <tr> <td><div align="center">A1.4</div></td> <td><div align="center">A1.8</div></td> <td><div align="center">A2.4</div></td> <td><div align="center">A2.8</div></td> <td><div align="center">A3.4</div></td> <td><div align="center">A3.8</div></td> <td><div align="center">A4.4</div></td> <td><div align="center">A4.8</div></td> <td><div align="center">A5.4</div></td> <td><div align="center">A5.8</div></td> <td><div align="center">A6.4</div></td> <td><div align="center">A6.8</div></td> <td><div align="center">A7.4</div></td> <td><div align="center">A7.8</div></td> <td><div align="center">A8.4</div></td> <td><div align="center">A8.8</div></td> <td><div align="center">A9.4</div></td> <td><div align="center">A9.8</div></td> </tr> <tr> <td><div align="center">A1.3</div></td> <td><div align="center">A1.7</div></td> <td><div align="center">A2.3</div></td> <td><div align="center">A2.7</div></td> <td><div align="center">A3.3</div></td> <td><div align="center">A3.7</div></td> <td><div align="center">A4.3</div></td> <td><div align="center">A4.7</div></td> <td><div align="center">A5.3</div></td> <td><div align="center">A5.7</div></td> <td><div align="center">A6.3 </div> <div align="center"></div></td> <td><div align="center">A6.7</div></td> <td><div align="center">A7.3</div></td> <td><div align="center">A7.7</div></td> <td><div align="center">A8.3</div></td> <td><div align="center">A8.7</div></td> <td><div align="center">A9.3</div></td> <td><div align="center">A9.7</div></td> </tr> <tr> <td><div align="center">A1.2</div></td> <td><div align="center">A1.6</div></td> <td><div align="center">A2.2</div></td> <td><div align="center">A2.6</div></td> <td><div align="center">A3.2</div></td> <td><div align="center">A3.6</div></td> <td><div align="center">A4.2</div></td> <td><div align="center">A4.6</div></td> <td><div align="center">A5.2</div></td> <td><div align="center">A5.6</div></td> <td><div align="center">A6.2</div></td> <td><div align="center">A6.6</div></td> <td><div align="center">A7.2</div></td> <td><div align="center">A7.6</div></td> <td><div align="center">A8.2</div></td> <td><div align="center">A8.6</div></td> <td><div align="center">A9.2</div></td> <td><div align="center">A9.6</div></td> </tr> <tr> <td><div align="center">A1.1</div></td> <td><div align="center">A1.5</div></td> <td><div align="center">A2.1</div></td> <td><div align="center">A2.5</div></td> <td><div align="center">A3.1</div></td> <td><div align="center">A3.5</div></td> <td><div align="center">A4.1</div></td> <td><div align="center">A4.5</div></td> <td><div align="center">A5.1</div></td> <td><div align="center">A5.5</div></td> <td><div align="center">A6.1</div></td> <td><div align="center">A6.5</div></td> <td><div align="center">A7.1</div></td> <td><div align="center">A7.5</div></td> <td><div align="center">A8.1</div></td> <td><div align="center">A8.5</div></td> <td><div align="center">A9.1</div></td> <td><div align="center">A9.5</div></td> </tr></table></div></body></html>\[/code\]when i try that in demo here http://jsfiddle.net/andricoga/yTj8K/ 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
Why doesn't my Overlay function work in my browser
- Thread starter AdamF
- Start date