Jump to content

Creating an area map dynamically, not working in IE


poizn

Recommended Posts

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.