Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Odd behavior when drawing rectangle over image

    Hello,
    I've been trying to figure out what is wrong with this code. Or perhaps it is a web client bug. The code works fine when there is no image underneath it. I have a map image that I insert into the body of the document, and the mouseup event seems to start failing, because the rectangle won't release when over the image.
    This is the code with the image tag. If you remove the image tag, you can see that it works fine. My debugging showed mouseup events when the image was removed. (Or, just draw the rectangle away from the map -- to the right).
    Thanks in advance for looking at this. I'm quite frustrated with it now.
    Kris

    --------------------------------------------------------------
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--

    var isDrawing = false;

    var xHeight = 0;
    var xWidth = 0;
    var startX = 0;
    var startY = 0;


    function debug(msg) {

    if (!debug.box) {
    debug.box = document.createElement("div");
    debug.box.setAttribute("style",
    "background-color: white; " +
    "font-family: monospace; " +
    "border: solid; " +
    "padding: 10px;");
    document.body.appendChild(debug.box);

    }


    var p = document.createElement("p");
    p.appendChild(document.createTextNode(msg));
    debug.box.appendChild(p);

    }//debug()


    function setStartDraw(e,id) {

    var currentElement=document.getElementById(id);

    debug("type: " + e.type);
    xHeight=0;
    xWidth=0;

    currentElement.style.height = xHeight;
    currentElement.style.width = xWidth;


    // pageX and pageY are the pixel coordinates
    // at which the event occurred, relative to
    // the upper-left corner of the window (NN4).
    // Testing for both pageX and clientX covers
    // DOM2/IE event models, as well as NN4.
    if (e.pageX || e.pageY) {
    startX = e.pageX;
    startY = e.pageY;
    } else if (e.clientX || e.clientY) {
    startX = e.clientX + document.body.scrollLeft;
    startY = e.clientY + document.body.scrollTop;
    }


    currentElement.style.top = startY;
    currentElement.style.left = startX;
    currentElement.style.display = 'inline';

    isDrawing = true;
    return false;


    }//end setStartDraw()





    function drawBox(e,id) {

    var currentElement=document.getElementById(id);
    var currentX = 0;
    var currentY = 0;

    if (isDrawing) {

    // Get current cursor position
    if (e.pageX || e.pageY) {
    currentX = e.pageX;
    currentY = e.pageY;
    } else if (e.clientX || e.clientY) {
    currentX = e.clientX + document.body.scrollLeft;
    currentY = e.clientY + document.body.scrollTop;
    }

    // Create box dimensions

    xHeight = currentY - startY;
    xWidth = currentX - startX;

    if (xWidth < 0) currentElement.style.left = currentX;
    else currentElement.style.left = startX;

    if (xHeight < 0) currentElement.style.top = currentY;
    else currentElement.style.top = startY;


    currentElement.style.width = Math.abs(xWidth);
    currentElement.style.height = Math.abs(xHeight);

    return false;


    }//isDrawing()



    }//drawBox()



    function stopDraw(e) {

    debug("type: " + e.type);

    isDrawing = false;
    return false;
    }



    function clearSelection(id) {

    var currentElement=document.getElementById(id);
    currentElement.style.display = none;

    }







    //-->
    </SCRIPT>
    </HEAD>

    <BODY BGCOLOR='#89C5EA'
    BACKGROUND='/Images/background_color.gif'
    onmousedown="setStartDraw(event,'selectionBox');"
    onmousemove="drawBox(event,'selectionBox');"
    onmouseup="stopDraw(event);">

    <div style="position:absolute;border:solid 1px #ff0000;display:none" id="selectionBox"></div>
    <IMG SRC="http://newlightsoftware.com/map_ca.gif" BORDER="0">







    </BODY>
    </HTML>

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Try:
    onmousemove="return drawBox(event,'selectionBox');"

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply! That fix does work in IE, but not Firefox. I'm not sure why, of course. I really appreciate the input, though -- it certainly is a start.

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Add return to all events:
    onmousedown="return setStartDraw(event,'selectionBox');"
    onmousemove="return drawBox(event,'selectionBox');"
    onmouseup="return stopDraw(event);"

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow. You are great! That worked!

    Thanks!!!!!


  •  

    Posting Permissions

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