Creating an area map dynamically, not working in IE

poizn · May 7, 2008

Hi all

Over the past few days i'v been creating a page with some tabs on. As you click on the tab, the content should update. Seems simple enough, but one of the tabs has an area map on. Again all seems simple, but it doesn't work in IE (it works in FF)

I have created the page below to demonstrate what im trying to do.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function add_event(obj , event_type , func) {
  if(obj.addEventListener) {
    obj.addEventListener(event_type , func , false);
    return true;
  } else if(obj.attachEvent) {
    var r = obj.attachEvent("on" + event_type , func);
    return r;
  } else {
    return false;
  }
}

function africa_toggle() {
  alert('1');
}

function loader() {
  var map_img = document.createElement("img");
  map_img.src = "world_map.jpg";
  map_img.id = "search_map";
  map_img.alt = "World Map";
  map_img.border = "0";
  // next line doesnt work if I use the above notation... so I had to use setAttribute
  map_img.setAttribute("usemap" , "#search_map_map");

  var map_tag = document.createElement("map");
  map_tag.name = "search_map_map";
  map_tag.id = "search_map_map";

  var area = document.createElement("area");

  area.id = "africa";
  area.shape = "poly";
  area.coords = "208,171,220,169,227,162,230,156,230,149,238,142,238,134,236,130,239,122,251,110,252,100,245,102,239,98,232,87,226,77,222,72,215,71,210,72,202,69,197,63,185,66,179,67,174,70,172,75,165,79,164,85,165,91,164,96,167,103,174,112,178,109,181,112,188,108,194,110,197,112,198,115,197,118,200,126,203,128,204,134,203,139,201,143,204,152,206,160,208,163";
  area.href = "africa.php";

  add_event(area , "mouseover" , africa_toggle);

  map_tag.appendChild(area);

  document.getElementById("body").appendChild(map_img);
  document.getElementById("body").appendChild(map_tag);
}

add_event(window , "load" , loader);
</script>
</head>
<body id="body">

</body>
</html>

Basically it should, on page load, create an img tag, create a map tag, and then create an area tag, and insert it all into the body tag.

Can anyone help?

Thank in advance

Cheers

rhodesa · May 7, 2008

seems to work if you do innerHTML instead....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function africa_toggle() {
  alert('1');
}

function loader() {
  var html = '<img src="world_map.jpg" id="search_map" alt = "World Map" border = "0" usemap="#search_map_map" />' + 
             '<map name="search_map_map" id="search_map_map">' +
             '<area id="africa" href="africa.php" onmouseover="africa_toggle()" shape="poly" coords="208,171,220,169,227,162,230,156,230,149,238,142,238,134,236,130,239,122,251,110,252,100,245,102,239,98,232,87,226,77,222,72,215,71,210,72,202,69,197,63,185,66,179,67,174,70,172,75,165,79,164,85,165,91,164,96,167,103,174,112,178,109,181,112,188,108,194,110,197,112,198,115,197,118,200,126,203,128,204,134,203,139,201,143,204,152,206,160,208,163" />' +
             '</map>';
  document.getElementById("body").innerHTML += html;
}

add_event(window , "load" , loader);
</script>
</head>
<body id="body">

</body>
</html>

Sign In

Creating an area map dynamically, not working in IE

Recommended Posts

poizn

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information