KOMPOOS.NL

spotlight image

home » javascripts » image-effects » spotlight-image.html

voorbeeld spotlight image

spotlight effect

uitleg procedure

Plaats de html regel ergens in de body van jouw pagina en plaats het javascript zo laag als mogelijk op de pagina (ook in de body-sectie). In het script kan je de diameter van het effect instellen, en ook hoeveel procent (van het zoeklicht) zichtbaar is op de afbeelding.

html code voor zoeklicht


<p>
        <img id="spotlight" src="image/spotlight-image.jpg" alt="spotlight effect" height="300" width="200" />
</p>

javascript schijnwerper procedure


<script>
/*global window: false */
/*global pageXOffset: false */
/*global pageYOffset: false */
/*global spotlight: false */
/*global regel_lamp: false */
/*global schuif_spotlight: false */
var spotlight_diameter = 50;
var procent_zichtbaar = 8;
var start_x = 0,
start_y = 0,
spotlight_x,
spotlight_y,
t,
temp_x,
temp_y,
is_ie = document.all ? true: false;
if (is_ie) {
    var de_css_code = "#spotlight{filter:light}",
    stijl_element = document.createElement("style");
    stijl_element.type = "text/css";
    if (stijl_element.styleSheet) {
        stijl_element.styleSheet.cssText = de_css_code;
    } else {
        stijl_element.appendChild(document.createTextNode(de_css_code));
    }
    document.getElementsByTagName("head")[0].appendChild(stijl_element);
}
function beweeg_spotlight() {
    spotlight_x = temp_x;
    spotlight_y = temp_y;
    spotlight.filters.light.MoveLight(1, spotlight_x, spotlight_y, spotlight_diameter, true);
}
function haal_muispositie(e) {
    temp_x = event.offsetX;
    temp_y = event.offsetY;
    if (temp_x < 0) {
        temp_x = 0;
    }
    if (temp_y < 0) {
        temp_y = 0;
    }
    if (t) {
        beweeg_spotlight();
    }
    return true;
}
if (is_ie && spotlight.filters) {
    document.all.spotlight.onmousemove = haal_muispositie;
    var temp_x = 0,
    temp_y = 0;
}
var spotlight_x = start_x,
spotlight_y = start_y,
t = true;
if (is_ie && spotlight.filters) {
    spotlight.style.cursor = "hand";
    spotlight.filters.light.addAmbient(255, 255, 255, procent_zichtbaar);
    spotlight.filters.light.addPoint(start_x, start_y, spotlight_diameter, 255, 255, 255, 255);
}
var img_tag,
kontekst,
canvas,
de_radius,
de_interval,
x = 0,
y = 0,
gradient;
window.addEventListener("load",
function() {
    img_tag = document.getElementsByTagName('img')[0];
    canvas = document.createElement('canvas');
    canvas.style.background = "url(" + img_tag.src + ")";
    kontekst = canvas.getContext('2d');
    canvas.width = img_tag.width;
    canvas.height = img_tag.height;
    de_radius = 75;
    img_tag.parentNode.replaceChild(canvas, img_tag);
    regel_lamp(0, 0, canvas.width, canvas.height);
    gradient = kontekst.createRadialGradient(0, 0, 0, 0, 0, de_radius);
    gradient.addColorStop(0, "rgba(255,255,255,1)");
    gradient.addColorStop(0.1, "rgba(255,255,255,0.9)");
    gradient.addColorStop(0.9, "rgba(255,255,255,0.05)");
    gradient.addColorStop(1, "rgba(255,255,255,0)");
    canvas.addEventListener('mouseover',
    function(ev) {
        de_interval = setInterval(schuif_spotlight, 40);
    },
    false);
    canvas.addEventListener('mousemove',
    function(ev) {
        x = (pageXOffset + ev.clientX) - ev.target.offsetLeft - 10;
        y = (pageYOffset + ev.clientY) - ev.target.offsetTop - 15;
    },
    false);
    canvas.addEventListener('mouseout',
    function(ev) {
        clearInterval(de_interval);
        regel_lamp(0, 0, canvas.width, canvas.height);
    },
    false);
},
false);
function regel_lamp(xc, yc, wc, hc) {
    if (xc < 0) {
        xc = 0;
    }
    if (yc < 0) {
        yc = 0;
    }
    kontekst.save();
    kontekst.beginPath();
    kontekst.globalCompositeOperation = "source-over";
    kontekst.fillStyle = "rgba(0,0,0,0.88)";
    kontekst.clearRect(xc, yc, wc, hc);
    kontekst.fillRect(xc, yc, wc, hc);
    kontekst.closePath();
    kontekst.restore();
}
var x_oud = 0,
y_oud = 0,
mathpi = 0;
function schuif_spotlight() {
    regel_lamp(x_oud - de_radius, y_oud - de_radius, 2 * de_radius, 2 * de_radius);
    kontekst.save();
    kontekst.beginPath();
    mathpi += Math.PI / 12;
    kontekst.globalCompositeOperation = "destination-out";
    kontekst.fillStyle = gradient;
    kontekst.translate(x, y);
    kontekst.arc(0, 0, de_radius, 0, 2 * Math.PI, false);
    kontekst.closePath();
    kontekst.fill();
    kontekst.restore();
    x_oud = x;
    y_oud = y;
}
</script>