tinfanide Posted November 4, 2011 Share Posted November 4, 2011 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 More sharing options...
Ingolme Posted November 4, 2011 Share Posted November 4, 2011 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 More sharing options...
tinfanide Posted November 4, 2011 Author Share Posted November 4, 2011 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 More sharing options...
eTianbun Posted November 4, 2011 Share Posted November 4, 2011 Since IE7 don't support setAttribute , why not also use: img.src="http://..." in the image source? Link to comment Share on other sites More sharing options...
tinfanide Posted November 4, 2011 Author Share Posted November 4, 2011 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 More sharing options...
tinfanide Posted November 4, 2011 Author Share Posted November 4, 2011 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 More sharing options...
tinfanide Posted November 4, 2011 Author Share Posted November 4, 2011 <!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 More sharing options...
justsomeguy Posted November 4, 2011 Share Posted November 4, 2011 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 More sharing options...
tinfanide Posted November 5, 2011 Author Share Posted November 5, 2011 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 More sharing options...
justsomeguy Posted November 7, 2011 Share Posted November 7, 2011 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2011 Share Posted November 7, 2011 Are you talking about the border around image in crappy IE, just add border:none; to .img class. Link to comment Share on other sites More sharing options...
tinfanide Posted November 9, 2011 Author Share Posted November 9, 2011 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 More sharing options...
dsonesuk Posted November 9, 2011 Share Posted November 9, 2011 I have tested it in IE8s - 7 compatible, IEtester IE6 to 9, and I see no outline or border of any kind, at normal state or when clicked. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.