KOMPOOS.NL

partial highlight image / javascript

home » javascripts » image-effects » partial-highlight-image.html

voorbeeld partial highlight

uitleg highlight procedure

Om deze procedure ook vlekkeloos in IE8 te laten werken moet je helemaal bovenaan de pagina (nog vóór het DOCTYPE) de code:  invoegen. Daarna moet je in de head-sectie van de pagina ook nog de regel  plaatsen om alles (althans voor IE8) naar behoren te laten werken. Plaats daarna de stylesheet (de css-code) in de head-sectie; gevolgd door de html-code (die in de body sectie geplaatst moet worden), en tot slot het stukje javascript wat (ook, maar wel zo laag als mogelijk) in de body-sectie thuis hoort. In dit voorbeeld zijn twee "highlight-area's" gemaakt welke je in de code makkelijk kunt vinden. Experimenteer met de getalletjes om een, voor jou, geschikte procedure te maken. De namen in de code en van de variabelen zijn duidelijk en beschrijvend. Het javascript is foutloos volgens de JSLint-norm.

de css code voor de highlight procedure


<style type="text/css">

        .highlight_afbeelding{ 
                position:relative; 
                width:202px;
                height:260px; 
                background-image:url('partial-highlight.jpg')}
        #highlight_positie_1{
                position:absolute;
                top:15px;
                left:15px}
        #highlight_positie_2{
                position:absolute;
                top:190px;
                left:60px}
        .highlight-cirkel,.highlight-circle{
                width:60px;
                height:60px;
                border-radius:65px}
        .highlight-circle{
                display:block;
                color:#000;
                background:#fff}
</style>
<!--[if lt IE 9]>
        <style type="text/css">
                v\: * { behavior:url(#default#VML);display:inline-block}
                .highlight-circle{color:inherit;background:transparent}
                body{margin:8px 8px 80px 8px}
        </style>
<![endif]-->

de html code voor de partial highlight procedure


<div class="highlight_afbeelding">
        <div id="highlight_positie_1">
                <cite>
                        <span class='highlight-circle'>
                        <!--[if lt IE 9]>
                                <v:roundrect class="highlight-cirkel" fillcolor="#fff" arcsize="50%"></v:roundrect>
                        <![endif]-->
                        </span>
                </cite>
        </div>
        <div id="highlight_positie_2">
                <span class='highlight-circle'>
                        <!--[if lt IE 9]>
                                <v:roundrect class="highlight-cirkel" fillcolor="#fff" arcsize="50%"></v:roundrect>
                        <![endif]-->
                </span>
        </div>
</div>

het javascript voor de partial highlight


<script>
var snelheid = 8;
var partial_highlight_css = ".highlight-cirkel,.highlight-circle{opacity:0.2;filter:alpha(opacity=20);-moz-border-radius:65px;-webkit-border-radius:65px;border-radius:65px 65px 65px 65px}",
highlight_element = document.createElement("style");
highlight_element.type = "text/css";
if (highlight_element.styleSheet) {
    highlight_element.styleSheet.cssText = partial_highlight_css;
} else {
    highlight_element.appendChild(document.createTextNode(partial_highlight_css));
}
document.getElementsByTagName("head")[0].appendChild(highlight_element);
var tag_lengte,
tag_stijl,
de_highlight,
i,
x0 = 0.005,
x1 = 0.005,
y1 = 0.005,
x2 = 0.55,
y2 = 0.24,
x3 = 9.6,
y3 = 0.24,
x4 = 50,
y4 = 10,
x5 = 50,
y5 = 1,
start;
de_highlight = document.getElementsByTagName("cite");
tag_lengte = de_highlight.length;
function doe_partial_highlight() {
    for (i = 0; i - tag_lengte; i++) {
        tag_stijl = de_highlight[i].style;
        tag_stijl.position = 'absolute';
        tag_stijl.left = (Math.sin(x0 * x1 + i * x2 + x3) * x4 + x5) + "px";
        tag_stijl.top = (Math.cos(x0 * y1 + i * y2 + y3) * y4 + y5) + "px";
    }
    x0 = x0 + snelheid;
}
setInterval(function() {
    doe_partial_highlight();
},
15);
</script>