<html>
<head>
<title>
Selectable
</title>
</head>
<style type='text/css'>
#images img {
margin: 10px;
}
</style>
<body>
<div id='images'>
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<br />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<br />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<br />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<br />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
<img src='http://s7.ucoz.net/img/fr/ic/11/br_new.gif' />
</div>
<script type="text/javascript">
var T, L, A = [], C = true, F = document.getElementById("images").getElementsByTagName("IMG");
function fix(event) {
event = event || window.event;
if ( !event.pageX || !event.pageY ) {
var html = document.documentElement, body = document.body;
event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
}
if ( !event.target ) event.target = event.srcElement;
return event;
}
function opacity(object, value) {
if (document.all && !window.opera)
object.style.filter = "alpha(opacity=" + (value * 100) + ")";
else
object.style.opacity = value;
}
function getOffset(element) {
var offsetLeft = 0, offsetTop = 0;
do {
offsetLeft += element.offsetLeft;
offsetTop += element.offsetTop;
} while (element = element.offsetParent)
return {
top: offsetTop,
left: offsetLeft
}
}
function each(object, handler) {
for (var i = 0; i < object.length; i++)
handler.call(object[i]);
}
each(F, function () {
var offset = getOffset(this);
this.top = offset.top, this.left = offset.left;
});
document.onmousedown = function (event) {
event = fix(event);
if (event.target.parentNode.id != "images")
each(F, function () {
opacity(this, 1);
});
else
each(F, function () {
opacity(this, 1);
}),
opacity(event.target, 0.5);
A = [];
T = event.pageY;
L = event.pageX;
document.onmousemove = function (evt) {
evt = fix(evt);
var rect = document.createElement("DIV"),
X = evt.pageX, Y = evt.pageY;
A[A.length] = rect;
rect.style.position = "absolute";
rect.style.top = Y > T ? T : Y;
rect.style.left = X > L ? L : X;
if (C)
rect.style.border = "1px solid #555555";
else
rect.style.backgroundColor = "#555555";
rect.style.height = Math.abs(Y - T);
rect.style.width = Math.abs(X - L);
rect.className = "rect";
var images = document.getElementById("images").getElementsByTagName("IMG");
for (var i = 0; i < images.length; i++) {
if ( X > L && Y > T )
var condition = images[i].top > T && images[i].top < Y && images[i].left > L && images[i].left < X;
if ( X < L && Y < T )
var condition = images[i].top < T && images[i].top > Y && images[i].left < L && images[i].left > X;
if ( X < L && Y > T )
var condition = images[i].top > T && images[i].top < Y && images[i].left < L && images[i].left > X;
if ( X > L && Y < T )
var condition = images[i].top < T && images[i].top > Y && images[i].left > L && images[i].left < X;
if ( condition )
opacity(images[i], 0.5);
else
opacity(images[i], 1);
}
if (A[A.length - 2]) document.body.removeChild(A[A.length - 2]);
document.body.appendChild(rect);
return false;
};
return false;
};
document.onmouseup = document.onclick = function () {
each(document.getElementsByTagName("DIV"), function () {
if (this.className == "rect")
document.body.removeChild(this);
});
document.onmousemove = new Function;
};
</script>
</body>
</html>
А так?