Q1215 How can I draw a box over another image?

You are here: irt.org | FAQ | DHTML | Q1215 [ previous next ]

I'm not sure how you create a layer on the fly in Microsoft Internet Explorer, but the following works in Netscape Navigator 4+, and if someone can add in the layer creation for Microsoft Internet Explorer 4....

<html>
<head>
<title>Draw Box on Image Example</title>
<script language="JavaScript"><!--
var x1=y1=x2=y2=o=null;

if (document.all)
    document.onmousedown=down, document.onmouseup=up;
else if (document.layers) {
    window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
    window.onmousedown=down, window.onmouseup=up;
}

function down(e) {
    if (document.all && window.event.srcElement.parentElement) {
        o=window.event.srcElement.parentElement;
        x1=window.event.clientX;
        y1=window.event.clientY;
    }
    else if (document.layers && document.layers['o'+e.target.name]) {
        o=document.layers['o'+e.target.name];
        x1=e.pageX;
        y1=e.pageY;
    }
    //alert(x1 + ',' + y1);
    return false;
}

var l;

function up(e) {
    if (document.all && window.event.srcElement.parentElement && o) {
        x2=window.event.clientX;
        y2=window.event.clientY;
        // ?
    }
    else if (document.layers && document.layers['o'+e.target.name] && o)
{
        x2=e.pageX;
        y2=e.pageY;
        l = new Layer(x2-x1);
        l.hidden = false;
        l.moveTo(x1,y1);
        l.resizeTo(x2-x1,y2-y1);
        l.src = 'box.htm';
    }
    o=null;
    return false;
}
//--></script>
</head>

<body bgcolor="#FFFFFF">

<span id="o0" style="position:absolute; left:0; top:0; width:50;">
<img src="image.gif" name="0" width="50" height="50" alt="An image in a span">
</span>

<div id="o1" style="position:absolute; left:100; top:100; width:75;">
<img src="image.gif" name="1" width="75" height="75" alt="An image in a div">
</div>

</body>
</html>