Haciendo un poquito mas el tonto jeje he metido este code
Código PHP:
<html>
<head>
<script language="javascript" type="text/javascript" >
var coordenadas = new Array();
var contador = 0;
function menor(a, b) {
var dato = (a < b) ? a : b;
return "" + dato + "px";
}
function dife(a, b) {
var dato = (a < b) ? b - a : a - b;
return "" + dato + "px";
}
var _ns4 = (document.layers) ? true : false;
var _ie = (document.all) ? true : false;
var _ns6 = (document.getElementById && !_ie) ? true : false;
var _coorX, _coorY;
if (_ns6) document.addEventListener("mousemove", mouseMove, true);
if (_ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}
if (_ie) document.onmousemove = mouseMove;
function mouseMove(e)
{
if (_ns4||_ns6) {_coorX = e.pageX; _coorY = e.pageY;}
if (_ie) {_coorX = event.x; _coorY = event.y;}
return true;
}
function ratitaX() {
return _coorX;
}
function ratitaY() {
return _coorY;
}
function lee(e) {
coordenadas[contador ++] = ratitaX();
coordenadas[contador ++] = ratitaY();
if (contador % 4 == 0) {
x1 = coordenadas[contador - 4];
x2 = coordenadas[contador - 2];
y1 = coordenadas[contador - 3];
y2 = coordenadas[contador - 1];
cuadradito = document.createElement("div");
cuadradito.style.left = menor(x1, x2);
cuadradito.style.top = menor(y1, y2);
cuadradito.style.width = dife(x1, x2);
cuadradito.style.height = dife(y1, y2);
cuadradito.style.position = "absolute";
cuadradito.style.borderWidth = "1px";
cuadradito.style.borderStyle = "solid";
cuadradito.style.borderColor = "#808080";
fondo = document.createElement("div");
fondo.style.width = dife(x1, x2);
fondo.style.height = dife(y1, y2);
fondo.style.position = "absolute";
fondo.style.backgroundColor = "#808080";
if(document.all) {
fondo.style.filter = "alpha(opacity: 30)";
} else {
fondo.style.MozOpacity = "0.3";
}
cuadradito.appendChild(fondo);
document.getElementById("capa").parentNode.appendChild(cuadradito);
}
}
</script>
</head>
<body style="position: relative; margin: 0px;">
<div id=contenedor style="position: relative; margin: 0px; padding: 0px" >
<img src="hugesize.jpg" id="capa" style="position: absolute; top: 0px; left: 0px; cursor: crosshair; padding: 0px" onclick="lee()" />
</div>
</body>
</html>
Eso ya te hace el efecto de alpha jajaja, como salga esto me voy a reir mucho jajajaj