Mouse event (onclick)

Discussion in 'Javascript' started by masantha wee, Apr 30, 2005.

  1. masantha wee

    masantha wee Guest

    Hi all,

    I am using Firefox and embedding Javascript in html. I understand that
    we can use mouse events by coding them in the body of html (by creating
    a button or anything and by adding in the events in the <img> tag).

    Code (Text):

    <input id="StdDev Value" name="StdDevButton" type="button"
    value="Standard Deviation Value" onclick="readStdDevValue()"/>

    But what if I need to add some mouse events without creating any img or
    button? What I mean is - when the mouse cursor is in certain coordinates
    (eg. in certain areas on an image), then if the user left click,
    something will happen. The beloow example code seems to be not working
    for me....

    <html>
    <head>
    <script language="javascript">
    document.addEventListener("mousemove", calculatePos, false);
    function init() {
    }
    function getMousePosition(event) {
    var posX = 0;
    var posY = 0;
    posX = event.clientX + document.body.scrollLeft;
    posY = event.clientY + document.body.scrollTop;
    var position = new Array(2);
    position[0]  = posX;
    position[1]  = posY;
    return position;
    }
    function calculatePos (event) {
    var mousePosition = getMousePosition(event);
    checkAreaIn(mousePosition);
    }
    function checkAreaIn(mousePosition) {
    var mx = mousePosition[0];
    var my = mousePosition[1];
    window.status = "X= " + mx + " Y= " + my;
    if (mx > 20 && mx < 80 && my > 40 && my < 100) {
    this.onclick = "pop()";
    } else {
    }
    }
    function pop() {
    alert("working!!!");
    }
    </script>
    </head>
    <body onload="init();">
    </body>
    </html>

    Could anyone tell me how could I do it, please?
    Thanks in advance.

    seanky
     
    masantha wee, Apr 30, 2005
    #1
    1. Advertisements

  2. masantha wee

    mwh Guest

    masantha wee wrote-
    Hi all,


    I am using Firefox and embedding Javascript in html. I understand that
    we can use mouse events by coding them in the body of html (by creating

    a button or anything and by adding in the events in the <img> tag).


    Code (Text):

    <input id="StdDev Value" name="StdDevButton" type="button"
    value="Standard Deviation Value" onclick="readStdDevValue()"/>


    But what if I need to add some mouse events without creating any img or

    button? What I mean is - when the mouse cursor is in certain
    coordinates
    (eg. in certain areas on an image), then if the user left click,
    something will happen. The beloow example code seems to be not working
    for me....
    ....
    Could anyone tell me how could I do it, please?
    Thanks in advance.


    seanky


    well, there is a way to acomplish this using the <map> tag.

    <HTML>
    ....
    <IMG height=208 src="someImageSource.jpg" width=241
    useMap=#newsplash border=0>

    <MAP name=newsplash>

    <AREA
    onClick="window.alert('Working!!!')"
    shape=POLY target=_top
    coords=1,2,1,46,78,48,80,197,240,201,239,18,93,12,94,2 <!--
    example of coords -->
    <AREA
    onClick="window.alert('Working!!!')"
    shape=RECT target=_top
    coords=someCoords
    <AREA
    onClick="window.alert('Working!!!')"
    shape=RECT target=_top
    coords=someCoords
    <AREA
    onClick="window.alert('Working')"
    shape=RECT target=_top
    coords=someCoords</MAP>



    </BODY>
    </HTML>

    Maybe this will help, I hope it does. This should work, but I a no
    javascript expert.

    (____)
    (\/)
    /-------\/
    / | MWH  ||
    -  ||----||
     
    mwh, Apr 30, 2005
    #2
    1. Advertisements

  3.  
    Thomas 'PointedEars' Lahn, May 10, 2005
    #3
  4. Thomas 'PointedEars' Lahn wrote:
    <snip>

    Subject to the W3C DOM events method being defined on the document in
    question, that will work. The - calculatePos - function takes the form
    of a function declaration within the same script element so the
    corresponding function object will be created and assigned to a
    'calculatePos' property of the global object during variable
    instantiation for the global execution context. That will happen, and be
    finished, before any global code is executed. Thus the above method call
    will receive a reference to that function object when the Identifier -
    calcuatePos - is resolved.

    Richard.
     
    Richard Cornford, May 10, 2005
    #4
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.