Владимир Токмаков

Просмотр картинок 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>