Details Example

MouseUp Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

<!-- MouseUp Example 
     Display where the mouse 
     is clicked in a blank image. -->

<html lang="en">
    <head>
        <title>MouseUp Example</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>

    <body>
        <h1>MouseUp Example</h1>
        <img id="img1">
        <p id="out1">&nbsp;</p>
    </body>
</html>

CSS Page -- styles.css

 /* MouseUp Example
   Display where the mouse 
   is clicked in a blank image. */

body { background-color: #E0E0FF; 
       font-family: Verdana, Tahoma, sans-serif; }

h1 { color: navy; }
     img { background-color: black; 
     width: 200px; height: 200px;
     margin: 20px; }

p { margin: 20px; padding: 5px; 
    border: 2px solid navy; 
    width: 200px; }

JavaScript Page -- script.js

 // MouseUp Example
// Display where the mouse 
// is clicked in a blank image.

// Event handler that fires when mouseup
// event occurs in the blank image. The clientX
// and clientY properties show the coordinates
// of the cursor relative to the upper left 
// corner of the document. Subtract (27, 100)
// to get the approximate coordinates relative
// to the upper left corner of the image.
function showPosition(e) {
    var x = e.clientX - 28;
    var y = e.clientY - 101;
    var para = document.getElementById("out1");
    para.innerHTML = `X: ${x} Y: ${y}`;
}

// Attach mouseup event to image.
function init( ) {
    var image = document.getElementById("img1");
    image.onmouseup = showPosition;
}

// Wait until the page has loaded to execute init.
window.onload = init;