Jump to content

Javascript Append Image Map Not Working In Ie7


tinfanide

Recommended Posts

The image map below does not work in IE7 (but works in IE8+)I searched online for this and know a little bit of the reason that it might be because of IE7 not reading setAttribute properly and thus I relied on the use img.useMap instead of img.setAttribute("usemap","#map")Can anyone provide a simple fix? Many thanks!

<script>window.onload = function(){var img = document.createElement("img");img.setAttribute("src","http://prodesigntools.com/img/adobe-cs5-icons.jpg");img.style.width = 1000+"px";img.style.height = 1000+"px";img.useMap = "#map";document.body.appendChild(img);var map = document.createElement("map");map.name = "map";map.innerHTML = "<area shape='rect' coords='0,0,500,500' href='javascript: alert(0)' /><area shape='rect' coords='500,0,1000,500' href='javascript: alert(1)' />"document.body.appendChild(map);}</script>

Link to comment
Share on other sites

Have you checked if Javascript is showing any errors? And is there a reason why you can't just put the HTML on the page instead of generating the elements with Javascript?

Link to comment
Share on other sites

No, the IE console doesn't show any error but I know IE7 does not process setAttribute properly.I need to make an image gallery with XML parsing the data. So I prefer JS to generate HTML instead of having the HTML tags and insert data.

Link to comment
Share on other sites

I think the point is not on img.setAttributeMaybe I've not talked about it accruatelyThe problem lies in the image mapStill searching for the solution

Link to comment
Share on other sites

I've found a site where somebody like me creating the image map thru JS and coming across the same trouble (caused by the stupid IE): http://www.codingforums.com/showthread.php?t=144690

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>  <head>    <title>Hello</title>	  <script type='text/javascript'>	    window.onload = function(){   	 img = document.createElement("img");	 img.setAttribute("src", "http://prodesigntools.com/img/adobe-cs5-icons.jpg");	 img.setAttribute("useMap", "#m-1-1");	 img.setAttribute("alt", "");	 document.body.appendChild(img);  	 var imgmap = document.createElement("map");	 imgmap.setAttribute("id", "m-1-1");	 imgmap.setAttribute("name", "m-1-1");   	 var area = document.createElement("area");	 area.setAttribute("alt", "");	 area.setAttribute("href", "http://www.about.com");	 area.setAttribute("shape", "circle");	 area.setAttribute("coords", "20,20,10");	  imgmap.appendChild(area);	 document.body.appendChild(imgmap); 	    }	  </script>    </head>  <body>  </body></html>

I've compared the code with my code and also summed up some points about using image map.It seems that without the id set for the image map in JS, IE7 cannot read it.It's only IE7- problem.

Link to comment
Share on other sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>  <head>    <title>Hello</title>	  <script type='text/javascript'>	    window.onload = function(){   	 img = document.createElement("img");	 img.setAttribute("src", "http://prodesigntools.com/img/adobe-cs5-icons.jpg");	 img.setAttribute("useMap", "#m-1-1");	 img.setAttribute("alt", "");	 document.body.appendChild(img);  	 var imgmap = document.createElement("map");	 imgmap.setAttribute("id", "m-1-1");	 imgmap.setAttribute("name", "m-1-1");   	 var area = document.createElement("area");	 area.setAttribute("alt", "");	 area.setAttribute("href", "#");	 area.setAttribute("shape", "rect");	 area.setAttribute("coords", "0,0,400,400");  area.style.outline = "none";	  imgmap.appendChild(area);	 document.body.appendChild(imgmap); 	    }	  </script>    </head>  <body>  </body></html>

But now another problem. IE7 is really d*** a nuisance!!!I've tried so many ways to get rid of the ugly outline around the area tag.Any fix for that, guys? Many thanks for any reply! I'm desperate...

Link to comment
Share on other sites

Move the appendChild call up, so that you append the element to the DOM first, then set the properties on it later. You might think that wouldn't matter, but this is IE we're talking about. Create the element, append it, and then change it.

Link to comment
Share on other sites

It doesn't have to do with the order of creating elements in JS in this case of IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>  <head>    <title>Hello</title>	  <script type='text/javascript'>	    window.onload = function(){   	 img = document.createElement("img");	 document.body.appendChild(img);	 img.setAttribute("src", "http://prodesigntools.com/img/adobe-cs5-icons.jpg");	 img.setAttribute("useMap", "#m-1-1");	 img.setAttribute("alt", "");  img.className = "img";  	 var imgmap = document.createElement("map");	 document.body.appendChild(imgmap); 	 imgmap.setAttribute("id", "m-1-1");	 imgmap.setAttribute("name", "m-1-1");   	 var area = document.createElement("area");  imgmap.appendChild(area); 	 area.setAttribute("alt", "");	 area.setAttribute("href", "#");	 area.setAttribute("shape", "rect");	 area.setAttribute("coords", "0,0,400,400");  area.className = "map"; 	    }	  </script><style>.map area {  outline: none;}.img {width: 600px;height: 200px;}</style>    </head>  <body>  </body></html>

I've reordered it as ya said, but the ugly outline still comes out when I click the image map area. I've tried to css set the area like

area {outline: 0;outline: none;border: 0;border: none;}

All attempts failed.

Link to comment
Share on other sites

No, I was saying that the map itself works fine in IE7+,but the point is that even it works in IE7,the ugly image outline (once the map is clicked) appears in IE7 (but NOT in IE8+)In FF, it does not appear either. I've used the "border: none" to try to get rid of the ugly image border but it failed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>  <head>    <title>Hello</title>		  <script type='text/javascript'>		    window.onload = function(){  		 img = document.createElement("img");		 document.body.appendChild(img);		 img.setAttribute("src", "http://prodesigntools.com/img/adobe-cs5-icons.jpg");		 img.setAttribute("useMap", "#m-1-1");		 img.setAttribute("alt", "");  img.className = "img"; 		 var imgmap = document.createElement("map");		 document.body.appendChild(imgmap);		 imgmap.setAttribute("id", "m-1-1");		 imgmap.setAttribute("name", "m-1-1");  		 var area = document.createElement("area");  imgmap.appendChild(area);		 area.setAttribute("alt", "");		 area.setAttribute("href", "#");		 area.setAttribute("shape", "rect");		 area.setAttribute("coords", "0,0,400,400");  area.className = "map";		    }		  </script><style>.map area {  outline: none;}.img {width: 600px;height: 200px;border: none;}</style>    </head>  <body>  </body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...