Andy Baxter said:
[color=blue]
> 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[/color]
update - I've tried taking the IMG tags out of the html altogether and
generating them using DOM calls. This works as far as the images are
concerned, but now it's not picking up the image map at all. If anyone has
any clue how to resolve this, I would appreciate it, as I'm starting to
run out of ideas (apart from writing my own image map code, which I
probably could do but would rather not ;) )
--
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.
