<!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>
