www.webdeveloper.com
Results 1 to 8 of 8

Thread: multiple click on image

  1. #1
    Join Date
    Feb 2009
    Posts
    64

    multiple click on image

    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

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2009
    Posts
    64
    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.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Feb 2009
    Posts
    64
    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?

  6. #6
    Join Date
    Feb 2009
    Posts
    64
    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?
    Last edited by wter; 03-06-2009 at 10:29 AM.

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    Code:
    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.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Feb 2009
    Posts
    64
    Thank a lot, vwphillips.

    What this line code mean?
    Code:
    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?
    Code:
     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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles