Javascript generated image maps don't link in any IE
In this static version, in any browser, you can click on the close area to jump to http://www.google.com.
<html>
<body>
<div id="my_div">
<img usemap="#map"
src="http://specialmedia.wnyc.org.s3.amazonaws.com/ads/open.jpg" />
<map name="map" id="map">
<area shape="rect" coords="900,0,1000,20"
href="http://www.google.com/" target="" alt="" />
</map>
</div>
</body>
</html>
This dynamic version should be identical, and is in every browser except IE6, IE7, and IE8. In the IEs, the map has no effect.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
</head>
<body>
<div id="my_div"></div>
<script>
var img = $("<img/>").attr("usemap", "#map");
img.attr("src", "http://specialmedia.wnyc.org.s3.amazonaws.com/ads/open.jpg");
var map = $("<map/>").attr("name", "map").attr("id", "map");
var area = $("<area/>").attr("shape", "rect");
area.attr("coords", "900,0,1000,20")
开发者_运维知识库 area.attr("href", "http://www.google.com/").attr("target", "")
area.attr("alt", "");
map.append(area);
$("#my_div").append(img).append(map);
</script>
</body>
</html>
Is there a way to make Javascript generated image maps in IE? I tried $(document.ready(... already.
there is a bug in jquery (should be fixed in 1.4) which prevents area to be appended to map elements
I might be wrong, but it is because HTML tags to be appended are first created inside a div element, and IE does not recognise area tags in divs as valid... and therefore ignores them.
The best workaround would be to create the whole map element as a string and then append the whole map element along with the child areas to the DOM
Or
wait for jquery 1.4 to be released...
e.g
var map=$("<map name='map' id='map'><area coords='900,0,1000,20' href='http://www.google.com/' alt='' /></map>");
$("#my_div").append(img).append(map);
加载中,请稍侯......
精彩评论