ARCHIV

Zadání

Optimalizace

Samotná implementace

Hurá kód

<div id="menuA" class="item">
            <img id="menuA-img" src="http://zeropage.cz/menu_fake.png" alt=""/>
            <map name="menuA-map">
                <area id="menuA-A" shape="polygon" coords="9,93, 57,11, 74,7, 85,23, 65,61, 21,89, 9,93"
 alt="Archív aktualit" href="http://zeropage.cz/?p=aktuality-archiv"/>
                <area id="menuA-B" shape="polygon" coords="21,89, 105,40, 118,48, 121,65, 80,90, 28,90, 21,89" 
alt="Poslední měsíc" href="http://zeropage.cz/?p=aktuality-mesic"/>
                <area id="menuA-C" shape="polygon" coords="28,90, 127,90, 137,108, 128,123, 84,125, 30,95, 28,90" 
alt="Poslední týden"href="http://zeropage.cz/?p=aktuality-tyden"/>
                <area id="menuA-D" shape="polygon" coords="30,95, 121,147, 122,166, 106,177, 67,157, 30,95"
 alt="Novinka" href="http://zeropage.cz/?p=novinka"/>
            </map>
        </div>

Javascrtiptová třída MenuItem

    this.animateInterval = null;
    this.timeoutedClose = null;
    this.listeners = new Array();

    this._animate = this._animate.bind(this);
    this._timedClose = this._timedClose.bind(this);

    JAK.Events.addListener(this.dom, 'click', this, '_open');
    //JAK.Events.addListener(this.dom, 'mousemove', this, '_move');
    JAK.Events.addListener(this.dom, 'mouseout', this, '_close');

MenuItem.prototype._open = function(e, elm){
    pos = JAK.DOM.getPortBoxPosition(elm);
    elementX = Math.round(e.clientX - pos.left);
    elementY = Math.round(e.clientY - pos.top);
    if (elementX > 5 && elementX < 140 && elementY > 90 && elementY < 125){
        this.vertex = 1;
        if (!this.animateInterval)
            this.animateInterval = setInterval(this._animate, 50);
    } else {
        console.log('X: '+elementX);
        console.log('Y: '+elementY);
    }
}

MenuItem.prototype._animate = function(){
    if (this.vertex == 1){   // otevirame
        this.dom.style.zIndex = 2;
        if (this.img == this.steps) {
            clearInterval(this.animateInterval);
            this.animateInterval = null;
            this._openAtEnd();
        } else
            this.img += 1;    
    } else {            // zavirame
        this._closeAtStart();
        if (this.img == 0){
            clearInterval(this.animateInterval);
            this.animateInterval = null;
            this.dom.style.zIndex = 1;
        } else
            this.img -= 1;
    }

    var s = ""+(this.img*-143) + "px 0px";
    this.dom.style.backgroundPosition = s;
}

MenuItem.prototype._overItem = function(e, elm){
    if (this.timeoutedClose != null){
        clearTimeout(this.timeoutedClose);
        this.timeoutedClose = null;
    }

    if (elm == this.domA)
        this.img = this.steps + 4;
    if (elm == this.domB)
        this.img = this.steps + 3;
    if (elm == this.domC)
        this.img = this.steps + 2;
    if (elm == this.domD)
        this.img = this.steps + 1;

    var s = ""+(this.img*-143) + "px 0px";
    this.dom.style.backgroundPosition = s;
}

Závěrem