Event.observe(window, 'load', function() {
    var areas = $$('map area');
    
    areas.each(function(area) {
        area.removeAttribute('href');
        
        area.onclick = function() { 
            drawBox(this.coords); 
            $('product_id').value = this.alt;
        }         
    });
});

function drawBox(coords) {
    var coordinaten = coords.split(',');
    
    var top     = coordinaten[1];
    var left    = coordinaten[0];
    var width   = coordinaten[2]-coordinaten[0];
    var height  = coordinaten[3]-coordinaten[1];
    
    var div = new Element('div');
    
    div.style.width = width+'px';
    div.style.height = height+'px';
    div.style.position = 'absolute';
    div.style.top = top+'px';
    div.style.left = left+'px';
    div.id = 'current_div';
    
    div.style.background = '#000000';
    
    if($('current_div')) {
        $('current_div').remove();
    }
    
    $('imagemap').insert(div);
    
    
}