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"
<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() {

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);



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

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