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.