dynamic image map not working in IE6

Discussion in 'Javascript' started by lofty00@fastmail.fm, Jun 9, 2006.

  1. Guest

    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;
    //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,"last");
    dojo.event.connect(mapArea,"onmouseover",tour,"mouseOverArea");
    dojo.event.connect(mapArea,"onmouseout",tour,"mouseOutArea");
    }
    }
    dojo.dom.insertAtPosition(tour.imageMap,tour.panoInnerDiv,"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.viewportRatio)+"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.viewportRatio)+"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.curView.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.name+"-"+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;
    if (imgTag!=undefined) {
    tour.panoInnerDiv.removeChild(imgTag);
    }
    imgTag=document.createElement("img");
    tour.panoImgTags=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");
    },
    , Jun 9, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ivor O'Connor
    Replies:
    4
    Views:
    826
    Isofarro
    Nov 25, 2003
  2. Peter Mount
    Replies:
    4
    Views:
    932
    Peter Mount
    Jan 31, 2006
  3. Replies:
    3
    Views:
    122
  4. Pugi!
    Replies:
    0
    Views:
    228
    Pugi!
    Feb 5, 2007
  5. timothytoe
    Replies:
    4
    Views:
    139
Loading...

Share This Page