poizn Posted May 7, 2008 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
rhodesa Posted May 7, 2008 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.