BaVa,
Ну вот как-то так в первом приближении ... тянуть за правый нижний
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
div{
border: #3366FF 2px solid;
height: 200px;
width: 200px;
background-color: #CCFFFF;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var doc = document;
window.onload = function() {
var t, r, b, l;
var xx,yy,rr,bb,f=!1;
var div = doc.getElementsByTagName("div")[0];
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
div.onmousemove = function(event) {
var e = event || window.event;
var x = e.clientX;
var y = e.clientY;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
div.innerHTML = "top: " + t + "<br>right: " + r + "<br>bottom: " + b + "<br>left: "+ l; // смотрю как изменяется
if((e.clientX > r-15) && (e.clientY> b-15))
{div.style.cursor = "se-resize";div.style.backgroundColor="#FFFF66"
}
else
{div.style.cursor = "default";div.style.backgroundColor="#CCFFFF"};
if(f){
div.style.width=rr - (xx - x) + "px"
div.style.height=bb - (yy -y) + "px"
}
}
div.onmousedown = function(event) {
var e = event || window.event;
xx = e.clientX;
yy = e.clientY;
rr = div.getBoundingClientRect().right;
bb = div.getBoundingClientRect().bottom;
if((e.clientX > r-15) && (e.clientY> b-15))f = !0;
}
div.onmouseup = function(event) {
f=!1
}
div.onmouseover = function(event) {
div.style.backgroundColor="#CCFFFF"};
}
</script>
</body>
</html>