KOMPOOS.NL

docking menu

home » javascripts » image-effects » dock-menu.html

uitleg procedure

Om het docking menu op een pagina te plaatsen, moet je de css van de procedure in de head-sectie plaatsen, de html-code in de body-sectie en het javascript zo laag als mogelijk (ook) in de body-sectie van de pagina. Voeg zoveel li's toe (of haal weg) als je wilt, en vervang de img's door jouw eigen plaatjes.

css voor procedure


<style type="text/css">
        .docking-class{
                list-style:none;
                position:relative;
                margin:0px auto;}
        .docking-class li,.dock a{
                display:inline;}
        .docking-class img{
                display:block;
                border:none;
                width:0px;
                height:0px;
                position:absolute;
                top:auto;
                left:auto;}
</style>

html code voor dock procedure


<ul id="dock" class="docking-class">
        <li><a href="#" title="dock voorbeeld 1"><img src='http://static.dns5.nl/dock-1.jpg' alt="dock 1"></a></li>
        <li><a href="#" title="dock voorbeeld 2"><img src='http://static.dns5.nl/dock-1.jpg' alt="dock 2"></a></li>
        <li><a href="#" title="dock voorbeeld 3"><img src='http://static.dns5.nl/dock-1.jpg' alt="dock 3"></a></li>
        <li><a href="#" title="dock voorbeeld 4"><img src='http://static.dns5.nl/dock-1.jpg' alt="dock 4"></a></li>
        <li><a href="#" title="dock voorbeeld 5"><img src='http://static.dns5.nl/dock-1.jpg' alt="dock 5"></a></li>
        <li><a href="#" title="dock voorbeeld 6"><img src='http://static.dns5.nl/dock-1.jpg' alt="dock 6"></a></li>
        <li><a href="#" title="dock voorbeeld 7"><img src='http://static.dns5.nl/dock-1.jpg' alt="dock 7"></a></li>
        <li><a href="#" title="dock voorbeeld 8"><img src='http://static.dns5.nl/dock-1.jpg' alt="dock 8"></a></li>
</ul>

javascript voor docking menu


<script>
/*global window: false */
var i,
j,
nieuwe_dock;
function $(id) {
    if (document.getElementById) {
        return document.getElementById(id);
    } else if (document.all) {
        return document.all[id];
    }
}
function dock(id) {
    this.snelheid = 10;
    this.soepel = 10;
    this.min = 40;
    this.max = 80;
    var img,
    afmeting = [];
    if (typeof(id) != 'string') {
        id = 'dock';
    }
    this.init = function() {
        var self = this;
        this.dock = $(id);
        afmeting.def = Math.floor((this.max - this.min) / 3);
        for (i = 0; i < 4; i++) {
            afmeting[i] = 1 * this.min + i * afmeting.def;
        }
        img = this.dock.getElementsByTagName('img');
        this.dock.style.height = afmeting[3] + "px";
        this.dock.style.width = (afmeting[0] * (img.length - 1)) + "px";
        for (i = 0; i < img.length; i++) {
            img[i].now = {
                left: 0,
                top: 0,
                size: afmeting[0]
            };
            img[i].target = {
                left: 0,
                top: 0,
                size: afmeting[0]
            };
            img[i].onmouseover = function(e) {
                e = window.event ? event: e;
                e = e.srcElement ? e.srcElement: e.target;
                for (i = 0; i < img.length; i++) {
                    if (e == img[i]) {
                        self.doe_dock(i);
                        break;
                    }
                }
            };
            img[i].onmouseout = function() {
                self.doe_dock( - 1);
            };
        }
        this.doe_dock( - 1);
        var doe_dock = function() {
            self.dock_funktie();
        };
        setTimeout(doe_dock, this.snelheid);
    };
    this.dock_funktie = function() {
        var self = this;
        for (i = 0; i < img.length; i++) {
            img[i].now.left = ((this.soepel - 1) * img[i].now.left + img[i].target.left) / this.soepel;
            img[i].style.left = Math.floor(img[i].now.left) + 'px';
            img[i].now.top = ((this.soepel - 1) * img[i].now.top + img[i].target.top) / this.soepel;
            img[i].style.top = Math.floor(img[i].now.top) + 'px';
            img[i].now.size = ((this.soepel - 1) * img[i].now.size + img[i].target.size) / this.soepel;
            img[i].style.width = Math.floor(img[i].now.size) + 'px';
            img[i].style.height = Math.floor(img[i].now.size) + 'px';
        }
        var doe_dock = function() {
            return function() {
                self.dock_funktie();
            };
        } (i);
        setTimeout(doe_dock, this.snelheid);
    };
    this.doe_dock = function(m) {
        for (i = 0; i < img.length; i++) {
            img[i].target.size = afmeting[0];
            for (j = 0; j < afmeting.length - 1; j++) {
                if (m > -1 && m < img.length && Math.abs(m - i) == j) {
                    img[i].target.size = afmeting[afmeting.length - 1 - j];
                }
            }
            img[i].target.top = afmeting[3] - img[i].target.size;
        }
        var n = m > 2 ? 2: m;
        if (n > -1) {
            img[0].target.left = -(1 / 2) * (afmeting[0] + afmeting.def * (n * (4 - (1 / 2) * n) + 3));
        } else {
            img[0].target.left = 0;
        }
        for (i = 1; i < img.length; i++) {
            img[i].target.left = img[i - 1].target.left + img[i - 1].target.size;
        }
    };
}
nieuwe_dock = new dock();
window.onload = function() {
    nieuwe_dock.init();
};
</script>