• Техногрет
  • Просмотр картинок

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Владимир Токмаков

    13 июня 2005


    Задача.

    Сделать навигацию без перезагрузки страницы.

    Как это выглядит в браузере

    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    46 
    47 
    48 
    49 
    50 
    51 
    52 
    53 
    54 
    55 
    56 
    57 
    58 
    59 
    60 
    61 
    62 
    63 
    64 
    65 
    66 
    <style type="text/css">
        #fsClipper { height: 330px; width: 100%; overflow: auto; //overflow: hidden; //overflow-x: auto; }
        .fsControl, #fsLinks a { color: darkblue; cursor: pointer; //cursor: hand; }
        .fsControl.disabled, #fsLinks a.current { color: #000000; cursor: default; text-decoration: none; }
        .fsControl.disabled { color: #666666; }
        #fsScreen { height: 300px ! important; background: no-repeat 50% 50%; }
    </style>
    <div id="fsClipper">
        <div id="fsScreen"></div>
    </div>
    <p>
        <span id="fsControl_prev" class="fsControl">&larr;</span>
        <span id="fsControl_next" class="fsControl">&rarr;</span>
    </p>
    <p id="fsLinks">
        <a href="/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg', 200, 200 )">он</a>,
        <a href="/portfolio/illustrations/i/577698ac49499acc.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/577698ac49499acc.jpg', 200, 200 )">они</a>,
        <a href="/portfolio/illustrations/i/69d02a844a673326.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/69d02a844a673326.jpg', 200, 200 )">она</a>,
        <a href="/portfolio/illustrations/i/69fbeb22269a853d.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/69fbeb22269a853d.jpg', 200, 200 )">оно</a>
    </p>
    <script type="text/javascript">
        function Filmstrip(){
            this.ePicture = document.getElementById('fsScreen');
            this.ePrev = document.getElementById('fsControl_prev');
            this.eNext = document.getElementById('fsControl_next');
            var eLinks = document.getElementById('fsLinks');
            this.aeLink = eLinks.getElementsByTagName('A');
            this.show_picture = function( sBackground, iWidth, iHeight ){
                this.ePicture.style.backgroundImage = "url(" + sBackground + ")";
                if( iWidth )
                    this.ePicture.style.width = iWidth;
                if( iHeight )
                    this.ePicture.style.height = iHeight;
                this.set_current( sBackground );
            }
            this.set_current = function( sHref ){
                for( var i = 0 ; i < this.aeLink.length ; i++ ){
                    if( this.aeLink[i].href.match( new RegExp( sHref + "$" ) ) ){
                        this.aeLink[i].className += " current";
                        this.ePrev.className = this.ePrev.className.replace( /\s+disabled/g, "" );
                        this.eNext.className = this.eNext.className.replace( /\s+disabled/g, "" );
                        if( i == 0 ){
                            this.ePrev.className += " disabled";
                            this.ePrev.onclick = function(){};
                            this.eNext.onclick = this.aeLink[i + 1].onclick;
                        }else if( i == this.aeLink.length - 1 ){
                            this.eNext.className += " disabled";
                            this.eNext.onclick = function(){};
                            this.ePrev.onclick = this.aeLink[i - 1].onclick;
                        }else{
                            this.eNext.onclick = this.aeLink[i + 1].onclick;
                            this.ePrev.onclick = this.aeLink[i - 1].onclick;
                        }
                    }else{
                        this.aeLink[i].className = this.aeLink[i].className.replace( /\s*current/g, "" );
                    }
                }
            }
        }
        var oFilmstrip = new Filmstrip();
        function Show_picture( sHref, iWidth, iHeight ){
            oFilmstrip.show_picture( sHref, iWidth, iHeight );
            return false;
        }
        oFilmstrip.aeLink[0].onclick();
    </script>