Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > dynamic image map not working in IE6

Reply
Thread Tools

dynamic image map not working in IE6

 
 
lofty00@fastmail.fm
Guest
Posts: n/a
 
      06-09-2006
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");
},

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Image map not working in FireFox chrisoftoday@googlemail.com HTML 5 06-15-2007 12:08 AM
image map test page - won't work in IE6 or FF lofty00@fastmail.fm Javascript 3 06-10-2006 08:50 AM
IE6 SP1 rendering vs IE6 SP2 rendering Peter Mount HTML 4 01-31-2006 08:01 AM
client side image map in NS not working Duncan Greenhill HTML 3 04-17-2005 06:10 PM
Just one ie6 template that works with ie6!? Ivor O'Connor HTML 4 11-25-2003 09:16 PM



Advertisments