hello,
I have a scrolling image in a div, with an image map attached to make
hotspots in the image that the user can hover over or click on. This is
working in firefox 1.5, but not in IE6- the image comes up, and scrolls
properly, but the imagemap isn't working. (If I attach an alert to the
onmouseover event for the map areas, nothing happens, even though it
does in FF). Everything else is working fine in both. No error messages
are generated. Both the map and the image are generated dynamically
using DOM calls, with the 'name' attribute in the map set to 'panoMap'
and the 'usemap' attribute in the image set to '#panoMap'. This works
OK in FF1.5. I'm using the dojo toolkit to attach events to the map
areas, but I don't think this is the problem, as it's working fine
elsewhere on the page. You can see a demo of the page at:
http://lofty.dyndns.info/pano/pano-test.html
This will view in FF but not in IE (there were some other bugs which I
had to fix, and I don't have access to my server for the next week)
The code used to generate the map, and the image, is pasted below (I
don't want to paste the full program as it's over 500 lines long). If
anyone knows straight off of any issues with IE and image maps, and how
to fix them, that would be a help. If not, I'll try to work it down to
a minimal test case, and post that. Thanks,
andy baxter
makeImageMap: function() {
// creates an HTML nodeset which is an imagemap for the current view.
//alert("making image map");
if (tour.imageMap!=undefined) {
// delete the old image map
tour.panoInnerDiv.removeChild(tour.imageMap);
}
tour.imageMap=document.createElement("map");
tour.imageMap.setAttribute("name","panoMap");
//tour.imageMap.style.zIndex="3";
for (var i=0; i<tour.curView.links.length; i++) {
var link=tour.curView.links[i];
//alert("found link:"+link.id);
for (var j=0; j<link.areas.length; j++) {
//alert("found area");
var mapArea=document.createElement("area");
var area=link.areas[j]; // area is an array of point objects.
var pointStr="";
for (var k=0; k<area.length; k++) {
var point=area[k];
if (pointStr!="") { pointStr += ","; };
var mapX=tour.resolution*tour.panoImg.ratio*point.pan;
var mapY=tour.resolution*point.height;
pointStr+=mapX.toFixed(0)+","+mapY.toFixed(0);
//alert("adding point with
pan:"+point.pan+",height:"+point.height);
}
mapArea.setAttribute("shape","poly");
mapArea.setAttribute("nohref","");
mapArea.setAttribute("coords",pointStr);
//mapArea.style.cursor="pointer";
//alert("pointStr:"+mapArea.coords);
mapArea.setAttribute("id",link.type+"--"+link.id+"--"+j);
//var id=tour.getAreaId(mapArea);
dojo.dom.insertAtPosition(mapArea,tour.imageMap,"l ast");
dojo.event.connect(mapArea,"onmouseover",tour,"mou seOverArea");
dojo.event.connect(mapArea,"onmouseout",tour,"mous eOutArea");
}
}
dojo.dom.insertAtPosition(tour.imageMap,tour.panoI nnerDiv,"first");
},
mouseOverArea: function(evt) {
tour.setCursor("pointer");
var linkInfo=tour.getAreaId(evt.target);
alert("over link:"+linkInfo.id);
var link=xml.lookup[linkInfo.type+"s"][linkInfo.id];
tour.liveLink=link;
if (linkInfo.type=="info") {
var descr=link.description;
if (link.link!=undefined) descr+=" Click the image for more
information about this object.";
dojo.dom.textContent(tour.panoInfo,descr);
}
else {
dojo.dom.textContent(tour.panoInfo,"This path will take you to
"+xml.lookup.views[link.destinationId].shortname);
}
//evt.preventDefault();
},
getAreaId: function(area) {
// find the id of an imagemap area.
var str=area.id;
var dash1=str.indexOf("--",0);
var dash2=str.indexOf("--",dash1+1);
var id=str.substring(dash1+2,dash2);
var type=str.substring(0,dash1);
//alert("str:"+str+" dash1:"+dash1+" dash2:"+dash2+" id:"+id);
return {id: id,type: type};
},
loadPano: function(newsize,newview,newpan) {
// resizes the viewport.
tour.panoDiv.style.height=newsize+"px";
tour.panoDiv.style.width=(newsize*tour.viewportRat io)+"px";
tour.panoDiv.style.clip="rect(0px,"+(newsize*tour. viewportRatio)+"px,"+newsize+"px,0px)";
tour.panoInnerDiv.style.height=newsize+"px";
tour.panoInnerDiv.style.width=(newsize*tour.viewpo rtRatio)+"px";
tour.panoInnerDiv.style.clip="rect(0px,"+(newsize* tour.viewportRatio)+"px,"+newsize+"px,0px)";
dojo.dom.textContent(tour.panoInfo,"");
// resize the image if necessary.
if ((newsize != tour.resolution) || (newview!=tour.curView)) {
// image name or size has changed, so reload the image
tour.pan=newpan;
tour.resolution=newsize;
tour.curView=newview;
// set the view description.
//alert("setting view description: "+tour.curView.description);
dojo.dom.textContent(tour.panoControlSpan,tour.cur View.description);
tour.panoReady=0; // disable the panorama code while the image
loads.
// load a new image. showPano will be called by an event once the
image has loaded.
tour.panoImg=new
tourImage(tour.panoImgPath+tour.curView.imageset.n ame+"-"+tour.resolution+".jpg");
tour.panoImg.preload(tour.showPano);
//alert("return:"+tour.panoImg.name);
};
},
showInfo: function(infoStr) {
// display information in the bottom window.
dojo.dom.textContent(tour.panoInfo,infoStr);
},
showPano: function() {
// shows the images in the panorama, once they have been loaded.
//alert("image has loaded. width:"+tour.panoImg.width+"
height:"+tour.panoImg.height+" ratio:"+tour.panoImg.ratio+"
name:"+tour.panoImg.name);
// create the image map.
tour.panoImg.ratio=tour.curView.imageset.ratio;
//alert("image loaded");
for (var i=0;i<2;i++) {
var imgTag=tour.panoImgTags[i];
if (imgTag!=undefined) {
tour.panoInnerDiv.removeChild(imgTag);
}
imgTag=document.createElement("img");
tour.panoImgTags[i]=imgTag;
imgTag.src=tour.panoImg.name;
imgTag.style.width=((tour.resolution*tour.panoImg. ratio)+1).toFixed(0)+"px";
imgTag.style.height=tour.resolution+"px";
imgTag.style.top="0px";
imgTag.style.left="0px";
imgTag.style.position="absolute";
imgTag.style.border="0px";
imgTag.setAttribute("usemap","#panoMap");
imgTag.style.visibility="visible"
dojo.dom.insertAtPosition(imgTag,tour.panoInnerDiv ,"first")
};
tour.makeImageMap();
tour.moveImages();
tour.panoMsgSpan.style.visibility="hidden";
tour.setCursor("crosshair");
// enable the panorama scrolling code.
tour.panoReady=-1;
//alert("panorama ready");
},
dynamic image map not working in IE6 
