Vytvoření efektu baterky v CSS a JS

Řešení je možná jednodušší, než se zdá.

1. Základem je velký černý obrázek s průhlednou dírou uprostřed (asi by mohl mít větší rozměr než 5000 × 5000 px),
2. ten se nastaví elementu roztaženému přes celou stránku jako background-image,
3. pomocí opacity (popřípadě pro starší Explorery filter:alpha(opacity=XX)) se nastaví úroveň tmy,
4. JavaScript bude tento obrázek posouvat dle pohybu myši a tím vytvářet výsledný efekt.

Funkce pro zjištění posice kursoru

To je nějaká hotová funkce sjednocující chování napříč prohlížeči.

function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};

    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        cursor.x = e.clientX + 
            (document.documentElement.scrollLeft || 
            document.body.scrollLeft) - 
            document.documentElement.clientLeft;
        cursor.y = e.clientY + 
            (document.documentElement.scrollTop || 
            document.body.scrollTop) - 
            document.documentElement.clientTop;
    }
    return cursor;
}

CSS

.baterka {
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url("baterka.png") center center no-repeat; 
    width: 100%; 
    height: 100%; 
    opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=70); /* průhlednost na 70 % */
}

JavaScript

document.onmousemove = function(e) {
    var cursorPos = getPosition(e); // zjištění posice kursoru
    /* Nastavení posice obrázku, 2500 je polovina šířky „obrázku s dírou“ */
    b.style.backgroundPosition = (cursorPos.x - 2500) + "px " + (cursorPos.y - 2500) + "px";
};