mousedown, then over

beginning of the lol or rainbow shield designer?

by nilloc

HTML

<div id="container">
</div>

CSS

#container{width:100px; height:100px; outline:1px solid #bada55;}
.pixel{float:left; height:10px; width:10px;outline:1px solid red;}
.pixel.selected{background:red;}

JavaScript

var i=100;
while(i>0)
{
    $('#container').append('<div class="pixel"></div>');
    i--;
}
$('#container').mousedown(function(evt){
    var $pxl = $(evt.target);
    if($pxl.hasClass('selected'))
    {
       $('.pixel').mouseover(function(){
            $(this).removeClass('selected');
        }); 
    }else{
        $('.pixel').mouseover(function(){
            $(this).addClass('selected');
        });
    }
    
    if($pxl.hasClass('pixel'))
    {
        $pxl.toggleClass('selected');
    }   
}).mouseup(function(){
    $('.pixel').unbind('mouseover');
});