KOMPOOS.NL

proportionally image size

home » javascripts » image-effects » proportionally-image-size.html

sitemap

uitleg proportionally image size

Om ruimte te besparen op jouw pagina('s) kan je deze image procedure gebruiken. Probeer er wel voor te zorgen dat de plaatjes niet "gigantisch" groot zijn. Afbeeldingen werken altijd negatief op de pagina-laadtijd (hoe klein ze ook zijn...). Hoe mooi images ook kunnen zijn, en hoe mooi jouw pagina's daar van kunnen worden:
Probeer er zo min mogelijk op jouw pagina te plaatsen. De boodschap luidt als volgt:
Plaats alléén die afbeeldingen op jouw pagina die nodig zijn voor het functioneren (zoals de afbeeldingen van jouw producten en/of de afbeelding van jouw vestiging etc.). Mocht je het nog niet gedaan hebben; ga dan even met jouw muis over de kleine afbeelding aan het begin van deze paragraph. Verder uitleg lijkt mij niet nodig. Plaats de html en het javascript in de body van jouw pagina. Het javascript, gaarne, zo laag als mogelijk.

html code proportionally image size

<p>
<b style="position:relative;width:40px;height:40px;float:left"><img style="position:absolute" class="zoom" 
        alt="proportionally image" src="proportional-image.jpg" width="40" height="40" /></b> 
Om ruimte te besparen op jouw pagina('s) kan je deze image procedure gebruiken. Rest van de tekst...
</p>

javascript voor de resize image procedure

<script>
/*global window: false */
if (document.images) { (function() {
        var i,
        zoom_nummer,
        de_cosinus,
        de_tijd = 20,
        de_snelheid = 20;
        var deze_zoom = function(afbeelding) {
            afbeelding = afbeelding || window.event;
            if (!deze_zoom.expressie.test(afbeelding.className)) {
                afbeelding = afbeelding.target || afbeelding.srcElement || null;
            }
            if (!afbeelding || !deze_zoom.expressie.test(afbeelding.className)) {
                return;
            }
            var e = deze_zoom,
            breedte_hoogte = function(dim) {
                return dim[0] * de_cosinus + dim[1] + 'px';
            },
            fix_zoom_size = function() {
                de_cosinus = (1 - Math.cos((e.zoom_array[i].jump / de_tijd) * Math.PI)) / 2;
                afbeelding.style.width = breedte_hoogte(e.zoom_array[i].w);
                afbeelding.style.height = breedte_hoogte(e.zoom_array[i].h);
                if (e.zoom_array[i].d && de_tijd > e.zoom_array[i].jump) {++e.zoom_array[i].jump;
                    e.zoom_array[i].timer = setTimeout(fix_zoom_size, de_snelheid);
                } else if (!e.zoom_array[i].d && e.zoom_array[i].jump > 0) {--e.zoom_array[i].jump;
                    e.zoom_array[i].timer = setTimeout(fix_zoom_size, de_snelheid);
                }
            },
            d = document.images,
            i = d.length - 1;
            for (i; i > -1; --i) {
                if (d[i] == afbeelding) {
                    break;
                }
            }
            zoom_nummer = i + 1;
            i = i + afbeelding.src;
            if (!e.zoom_array[i]) {
                afbeelding.title = 'zoom thumbnail ' + zoom_nummer;
                e.zoom_array[i] = {
                    afbeelding: new Image(),
                    jump: 0
                };
                e.zoom_array[i].afbeelding.onload = function() {
                    e.zoom_array[i].w = [e.zoom_array[i].afbeelding.width - afbeelding.width, afbeelding.width];
                    e.zoom_array[i].h = [e.zoom_array[i].afbeelding.height - afbeelding.height, afbeelding.height];
                    e(afbeelding);
                };
                e.zoom_array[i].afbeelding.src = afbeelding.src;
                return;
            }
            if (e.zoom_array[i].timer) {
                clearTimeout(e.zoom_array[i].timer);
            }
            e.zoom_array[i].d = !e.zoom_array[i].d;
            fix_zoom_size();
        };
        deze_zoom.zoom_array = {};
        deze_zoom.expressie = new RegExp('\\bzoom\\b');
        if (document.addEventListener) {
            document.addEventListener('mouseover', deze_zoom, false);
            document.addEventListener('mouseout', deze_zoom, false);
        } else if (document.attachEvent) {
            document.attachEvent('onmouseover', deze_zoom);
            document.attachEvent('onmouseout', deze_zoom);
        }
    })();
}
</script>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.