Jump to content
tinfanide

Javascript Append Image Map Not Working In Ie7

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>

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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...

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

I'm confused. First you said the image map "didn't work", and now you're talking about a border. What exactly is the problem? Do you have this online anywhere?

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

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.   Paste as plain text instead

  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.

Loading...

×
×
  • Create New...