multiple click on image

[wter]

How to let the user click multiple point on one image?

Like the attachment picture show below.
image.JPG

I wan use JavaScript and DHTML language to do....

Please help me.

Thanks

[vwphillips]

http://www.vicsjavascripts.org.uk/Im...pHighLight.htm

[wter]

Thanks for reply.

How about i doesn't want set the coordinate that can be clicked? I want the coordinates can dynamically changes while user click. And whole image map can be clicked without setting the limit.

[vwphillips]

http://www.vicsjavascripts.org.uk/Im...eHighLight.htm

[wter]

Thanks vwphillips. This is what i wan. But i dun really understand the code. Can u explain to me? And function zxcES() is for wat, are the function is already defined in javascript?

How about i wan loop 5 times so that user only cannot click not more 5 times?

[wter]

How about i wan loop 5 times so that user only cannot click not more 5 times and pop-up a message? Finally the click sequence can save to database by using Mysql. How to do?

[vwphillips]

zxcImgHiLight.prototype.hilight=function(ev){
 var pos=zxcPos(this.img);
 var mse=[ev.clientX-pos[0],ev.clientY-pos[1]];
 var ary=this.ary;
 if (ary.length>4) return false;
 if (!this.over){
  for (var z0=0;z0<ary.length;z0++){
   if (mse[0]>zxcLTWH(ary[z0],'left')-zxcLTWH(ary[z0],'width')/2&&mse[0]<zxcLTWH(ary[z0],'left')+zxcLTWH(ary[z0],'width')*1.5&&mse[1]>zxcLTWH(ary[z0],'top')-zxcLTWH(ary[z0],'height')/2&&mse[1]<zxcLTWH(ary[z0],'top')+zxcLTWH(ary[z0],'width')*1.5) return;
  }
 }
 var win=zxcES(this.win.cloneNode(false),{position:'absolute',visibility:'visible',left:mse[0]-zxcLTWH(this.win,'width')/2+'px',top:mse[1]-zxcLTWH(this.win,'height')/2+'px'},this.p);
 this.addevt(win,'click','remove',win)
 zxcES(this.img.cloneNode(false),{position:'absolute',left:-zxcLTWH(win,'left')+'px',top:-zxcLTWH(win,'top')+'px'},win);
 if (this.nu) zxcES('DIV',{},win,this.cnt++);
 this.ary.push(win);
 if (this.msk) zxcES(this.msk,{visibility:'visible'});
}

zxcES is a code effient way of applying style, creating elements, appending elements ans appending text nodes.

[wter]

Thank a lot, vwphillips.

What this line code mean?

if (!this.over){
  for (var z0=0;z0<ary.length;z0++){
   if (mse[0]>zxcLTWH(ary[z0],'left')-zxcLTWH(ary[z0],'width')/2&&mse[0]<zxcLTWH(ary[z0],'left')+zxcLTWH(ary[z0],'width')*1.5&&mse[1]>zxcLTWH(ary[z0],'top')-zxcLTWH(ary[z0],'height')/2&&mse[1]<zxcLTWH(ary[z0],'top')+zxcLTWH(ary[z0],'width')*1.5) return;
  }
 }

And what is meaning of this code below?

 var win=zxcES(this.win.cloneNode(false),{position:'absolute',visibility:'visible',left:mse[0]-zxcLTWH(this.win,'width')/2+'px',top:mse[1]-zxcLTWH(this.win,'height')/2+'px'},this.p);
 this.addevt(win,'click','remove',win)
 zxcES(this.img.cloneNode(false),{position:'absolute',left:-zxcLTWH(win,'left')+'px',top:-zxcLTWH(win,'top')+'px'},win);
 if (this.nu) zxcES('DIV',{},win,this.cnt++);
 this.ary.push(win);
 if (this.msk) zxcES(this.msk,{visibility:'visible'});
}

i do not really understand it, hopefully you can explain the detail for me.

Thanks