Area of selection

by Oski Krawczyk

CSS

html, body {
    height: 100%;
    position: relative;
    background: url(http://img810.imageshack.us/img810/386/02265wintersun800x480.jpg);
}

div {
    position: absolute;
    border: solid 1px rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
}

JavaScript

var cracker, drag;

Element.implement({
    fadeoff: function(){
        new Fx.Tween(this, {
            onComplete: function(){
                this.destroy();
            }.bind(this)
        }).start('opacity', 0);
    }
});

document.body.addEvents({
    mousedown: function(e){
        cracker = new Element('div', {
            styles: {
                top: e.client.y,
                left: e.client.x
            }
        }).inject(document.body);
        
        cracker.store('initial:pos', {
            top: e.client.y,
            left: e.client.x
        });
        
        drag = true;
    },
    
    mouseup: function(){
        cracker.fadeoff();
        drag = false;
    },
    
    mousemove: function(e){
        if (cracker && drag){
            var p = cracker.retrieve('initial:pos');
            cracker.set('styles', {
                height: e.client.y - p.top,
                width: e.client.x - p.left
            });            
        }
    }
});