Question

我制作了一张地图，当我指向一个区域时，会弹出一些信息。

适用于Safari和Chrome，但不适用于Firefox或Internet Explorer（如果您想查看它，请访问samtranum.com/border-barriers）。

如何让下面的代码在Firefox和IE中运行？

使用Javascript：

function showTooltip(div, title, desc) {
  var left = event.pageX - 200 + 'px'; 
  var top = event.pageY - 700 + 'px';
  div.style.display = 'inline';
  div.style.position = 'absolute';
  div.style.width = '200px';
  div.style.top = top;
  div.style.left = left;
  div.style.backgroundColor = 'white';
  div.style.border = 'solid 1px black';
  div.style.padding = '10px';
  div.innerHTML = '<b>' + title + '</b> <div style="padding-left:10; padding-right:5">' +     desc + '</div>';
} 
function hideTooltip(div) {
  div.style.display = 'none';
}

HTML：

<body> 
   <div style="display:none" id="t1"></div>

  <img src="http://static.squarespace.com/static/516faf88e4b03f8eb2807350/t/519f3bdee4b05327e360c53d/1369390047458/Borders_Map1.jpg" width="472" height="859" usemap="#bordermap"/>

<map name="bordermap">

<area shape="poly" coords="190,321,194,323,199,322,207,328,202,339,216,341,211,352,227,338,217,333,212,330,210,325,205,321,201,318" onMouseOut="hideTooltip(t1)" onMouseOver="showTooltip(t1, 'Central America', 'There is a barrier between Cuba and the American enclave in Guantanamo Bay, and there have been proposals for Belize-Guatemala and Costa-Rica-Nicaragua barriers.')">

等。从这里开始，每个地区都是一样的。

Answer 1

function showTooltip(id, title, desc) {
  var left = event.pageX - 200 + 'px',
      top = event.pageY - 700 + 'px',
      div = document.getElementById('t1');
  div.style.display = 'inline';
...
}

试试这个（hide_tooltip相同）

onMouseover与IE和Firefox的兼容性

1 个答案: