body
<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"></span> <span id="fsControl_next" class="fsControl"></span> </p> <p id="fsLinks"> <a href="http://diano4ka.ru/amitie_01.jpg" onclick="return Show_picture( 'http://diano4ka.ru/amitie_01.jpg')">1</a> <a href="http://diano4ka.ru/amitie_02.jpg" onclick="return Show_picture( 'http://diano4ka.ru/amitie_02.jpg')">2</a> <a href="http://diano4ka.ru/amitie_03.jpg" onclick="return Show_picture( 'http://diano4ka.ru/amitie_03.jpg')">3</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>
Используются технологии
uCoz