I have an image scrolling in a viewport for a panoramic image
viewer. The viewport can be resized to several set resolutions so people
can adjust the size according to their bandwidth. There are hotspots on
the image which have been defined using an image map. This map is
generated in javascript using the following code (in the object 'tour.'):
makeImageMap: function() {
// creates an HTML nodeset which is an imagemap for the current view.
//alert("making image map");
if (tour.imageMap!=0) {
// delete the old image map
tour.panoInnerDiv.removeChild(tour.imageMap);
}
tour.imageMap=document.createElement("map");
tour.imageMap.name="panoMap";
tour.imageMap.style.zIndex="3";
dojo.dom.insertAtPosition(tour.imageMap,tour.panoI nnerDiv,"first");
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.shape="poly";
mapArea.nohref="";
mapArea.coords=pointStr;
mapArea.style.cursor="hand";
//alert("pointStr:"+mapArea.coords);
mapArea.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");
}
}
},
when I resize the viewport, the map is supposed to be re-generated to take
account of the new image. If I look at the page's DOM using the Firefox
DOM inspector, it looks like this is happening correctly, but the browser
isn't using the new image map - the hotspots are still there, but in the
wrong place on the image, as if it's still using the old map (which should
have been deleted by when the viewport was resized)
The code that resizes the viewport and reloads the image is below:
resizeViewport: function(newsize) {
// 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)";
// resize the image if necessary.
if (newsize != tour.resolution) {
// image size has changed, so reload the image
tour.resolution=newsize;
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.panoImgPrefix+"-"+tour.resolution+".jpg");
// loads the image and sets a callback on tour.showPano
tour.panoImg.preload(tour.showPano);
//alert("return:"+tour.panoImg.name);
};
// create the image map.
tour.makeImageMap();
},
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);
//alert("image loaded");
tour.setPanoImg(tour.panoImgTag1);
tour.setPanoImg(tour.panoImgTag2);
tour.panoImgTag1.usemap="#panoMap";
tour.panoImgTag2.usemap="#panoMap";
tour.moveImages();
tour.panoImgTag1.style.visibility="visible";
tour.panoImgTag2.style.visibility="visible";
tour.panoMsgSpan.style.visibility="hidden";
// enable the panorama scrolling code.
tour.panoReady=-1;
//alert("panorama ready");
},
The full code is at: http://lofty.dyndns.info/pano2/js/pano.js
The demo page is at: http://lofty.dyndns.info/pano2/pano-test.html
What I would like to know is whether this is a browser bug that anyone
else has come across, or if I'm doing something wrong in the way I've set
up the image map. As far as I can see, it's the former, because it works
OK when it first loads. If it is a bug, does anyone have any idea how to
trick the browser into using the correct map??
thanks,
andy
--
http://www.niftybits.ukfsn.org/
remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.
