这样的效果该怎么实现呢？

测试成功，就是反向选择有点问题<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isStart = false;function selImg()
{
    if(isStart == false)
    {
        window.preY = event.clientY;
        window.preX = event.clientX;
        isStart = true;
    }
    else
    {
        if(parseInt(event.clientX,10) <= window.preX 
            && parseInt(event.clientY,10) <= window.preY )
        {
            areaDiv.style.top = window.preY - parseInt(areaDiv.style.height,10);
            areaDiv.style.left = window.preX - parseInt(areaDiv.style.width,10);
            areaDiv.style.width = window.preX - parseInt(event.clientX,10);
            areaDiv.style.height = window.preY - parseInt(event.clientY,10);
        }
        if(parseInt(event.clientX,10) > window.preX 
            && parseInt(event.clientY,10) > window.preY )
        {
            areaDiv.style.top = window.preY;
            areaDiv.style.left = window.preX;
            areaDiv.style.width = parseInt(event.clientX,10) - window.preX;
            areaDiv.style.height = parseInt(event.clientY,10) - window.preY;
        }
        if(parseInt(event.clientX,10) <= window.preX 
            && parseInt(event.clientY,10) > window.preY )
        {
            areaDiv.style.top = window.preY;
            areaDiv.style.left = window.preX - parseInt(areaDiv.style.width,10);
            areaDiv.style.width = window.preX - parseInt(event.clientX,10);
            areaDiv.style.height = parseInt(event.clientY,10) - window.preY;
        }
        if(parseInt(event.clientX,10) > window.preX 
            && parseInt(event.clientY,10) <= window.preY )
        {
            areaDiv.style.top = window.preY - parseInt(areaDiv.style.height,10);
            areaDiv.style.left = window.preX;
            areaDiv.style.width = parseInt(event.clientX,10) - window.preX;
            areaDiv.style.height = window.preY - parseInt(event.clientY,10);
        }
        isStart = false;
        areaDiv.style.display = "";
    }
}document.onclick = function()
{
    event.cancelBubble = true;
    if(event.srcElement.id != "myImg")
    {
        areaDiv.style.top = "0px";
        areaDiv.style.left = "0px";
        areaDiv.style.width = "0px";
        areaDiv.style.height = "0px";
        areaDiv.style.display = "none";
        isStart = false;
    }    
}//-->
</SCRIPT>
</HEAD><BODY onselectstart="return false;">
<div style="position:absolute;border:1px solid black; width:0px; height:0px; top:0px;display:none;left:0px; 
     background-color:999999;filter: alpha(opacity=40);" id="areaDiv">
</div>
<IMG id="myImg" src="***.jpg" width="500" height="500" onClick="selImg()">
</BODY>
</HTML>