www.webdeveloper.com
Results 1 to 12 of 12

Thread: Mouse click position on the image

Hybrid View

  1. #1
    Join Date
    Oct 2005
    Posts
    4

    Mouse click position on the image

    How can I capture mouse click position on the image, and draw a little arrow on the image?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    capture the mouse pos:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script language="JavaScript" type="text/JavaScript">
    var 
    posx;var posy;
    function 
    capmouse(e){
    // captures the mouse position
    posx 0posy 0;
    if (!
    e){var window.event;}
    if (
    e.pageX || e.pageY){
    posx e.pageX;
    posy e.pageY;
    }
    else if (
    e.clientX || e.clientY){
    posx e.clientX;
    posy e.clientY;
    }
    }
    function 
    showP(){
    alert('X mouse is: '+posx+' Y mouse is: '+posy)
    }
    </script>
    </head>

    <body onmousemove="capmouse(event)">
    <img src="00.jpg" onclick="showP()">
    </body>
    </html> 

  3. #3
    Join Date
    Oct 2005
    Posts
    4
    Kor, this is OK. But I don't need messagebox with x y position. As you can see from my question I want to mark (by some another image,maybe arrow) the place where you click on first image. I know that I must use layers for this, but I'm not so good with javascript

  4. #4
    Join Date
    Jun 2005
    Location
    Denmark
    Posts
    135
    i think you need to map (ismap/usemap commands) you image.
    i'm not much into mapping. but using this the click will "execute" the coordinates of the click according to the image. and when e.g you click at the image-coordinates "300,200" then u can center the little image at this point using some styling through javascript.

  5. #5
    Join Date
    Jan 2005
    Posts
    386
    I adapted a little Kor's script, this works (it positions a X on the image, where the user clicked). You could easily improve it (positioning an arrow image, for ex.):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <title>Mouse position</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript"> 
    <script language="JavaScript" type="text/JavaScript"> 
    var posx;var posy; 
    
    function capmouse(e){ 
    // captures the mouse position 
      posx = 0; posy = 0; 
      if (!e){var e = window.event;} 
      if (e.pageX || e.pageY){ 
        posx = e.pageX; 
        posy = e.pageY; 
      } 
      else {
        if (e.clientX || e.clientY){ 
          posx = e.clientX; 
          posy = e.clientY; 
        } 
      }
    } 
    function showP(){
      document.getElementById("div2").className="div3"; 
      document.getElementById("div2").style.top =(posy-10)+'px';
      document.getElementById("div2").style.left=(posx-6)+'px';
    } 
    </script> 
    <style type="text/css">
    .div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5}
    .div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;}
    .div3 {position:absolute;visibility:visible;z-index:10;font-family:monospace;font-size:20px;font-weight:900;color:black;}
    </style>
    
    </head> 
    
    <body onmousemove="capmouse(event)"> 
      <div id="div1" class="div1">
        <img src="./my_image.gif" onclick="showP()"> 
      </div>
      <div id="div2" class="div2">
      X
      </div>
    </body> 
    </html>
    This orange ad for MacroMedia Studio 8 is the ugliest thing I've ever seen.

  6. #6
    Join Date
    Oct 2005
    Posts
    4
    Thank you Herodote92 very much, I have tested your script, and it is exactly what i'm looking for.

  7. #7
    Join Date
    Apr 2003
    Location
    Sweden
    Posts
    54

    Exclamation

    One issue.

    If the image used is to big for the browser and you have to scroll the X is not placed at the same point as you are clicking on. Solution?

    /marcus

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Yes, you may compensate the scroll position:
    Code:
    <script type="text/JavaScript">
    var posx;var posy;
    function getMouse(e){
    posx=0;posy=0;
    var ev=(!e)?window.event:e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    }
    else if(ev.clientX){//IE
    posx=ev.clientX+document.body.scrollLeft;
    posy=ev.clientY+document.body.scrollTop;
    }
    else{return false}//old browsers
    }
    </script>

  9. #9
    Join Date
    Apr 2003
    Location
    Sweden
    Posts
    54
    Thanks a lot... :-)

    /marcus

  10. #10
    Join Date
    Feb 2009
    Posts
    64
    how to control the click on the so that we can only click on the image not more 5 times click?

  11. #11
    Join Date
    Feb 2013
    Posts
    2
    I am also interested in the script here but when I inserted it into my page two issues arised.
    1) The picture that is supposed to be clicked ended up on the top of the page overlaying the form underneath. I need it to be positioned in a certain place.

    2) I need to be able to position several marks on the same image. How do I do that?

    And as a bonus, I need these marks to be able to be transferred to a pdf along with everyting else in the form at the end of completing the form.

  12. #12
    Join Date
    Feb 2013
    Posts
    11
    Thanks Bro for sharing us

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