Skrypty-multimedia

HEAD:
<style> .borderimage{border:1px solid black;} </style> <script language="JavaScript1.2"> /* script by Dynamic Drive*/ function borderit(which,color){ //if IE 4+ or NS 6+ if (document.all||document.getElementById){ which.style.borderColor=color } } </script>

BODY:
<img src="photo1.jpg" class="borderimage" onMouseover="borderit(this,'red')" onMouseout="borderit(this,'white')">

Podświetlany obrazek

Efekt oświetlania obrazka latarką czy też reflektorem.

HEAD:
<style>  </style>

BODY:
<img id="myimage" src="photo1.jpg"> <script language="JavaScript1.2"> //script by Erik F - die_schlampe@hotmail.com s = 50; // rozmiar swiatelka vp = 50; // widoczna czesc obrazka w procentach startx = 0; // pozycja od gory swiatelka po zaladowaniu skryptu starty = 0; // pozycja od lewej strony swiatelka po zaladowaniu skryptu ////////////////////////////////////////////////////////////////// // Nie edytowac // ////////////////////////////////////////////////////////////////// var IE = document.all?true:false function moveL() { xv = tempX; yv = tempY; myimage.filters.light.MoveLight(1,xv,yv,s,true); } if (IE&&myimage.filters) document.all.myimage.onmousemove = getMouseXY; var tempX = 0 var tempY = 0 function getMouseXY(e) { tempX = event.offsetX tempY = event.offsetY if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0} if (t) { moveL(); } return true } var xv = startx; var yv = starty; var t= true; if (IE&&myimage.filters){ myimage.style.cursor="hand"; myimage.filters.light.addAmbient(255,255,255,vp) myimage.filters.light.addPoint(startx,starty,s,255,255,255,255) } </script>

Taśmowy pokaz slajdów

Koleny przykład przedstawienia plików graficznych.

HEAD:

BODY:
<script language="JavaScript1.2"> /* Up down slideshow Script- Updated: 99/05/15 By Dynamic Drive (www.dynamicdrive.com) For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com */ ///////configure the below four variables to change the style of the slider/////// //set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow! var scrollerwidth=180 var scrollerheight=100 var scrollerbgcolor='#909898' //3000 miliseconds=3 seconds var pausebetweenimages=3000 //configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag var slideimages=new Array() slideimages[0]='<a href="http://www.zama.republika.pl"><img src="../design/miniatury/des1.jpg" border="0"></a>' slideimages[1]='<img src="../design/miniatury/des2.jpg">' slideimages[2]='<img src="../design/miniatury/des3.jpg">' slideimages[3]='<img src="../design/miniatury/des4.jpg">' slideimages[4]='<img src="../design/miniatury/des5.jpg">' //extend this list ///////Do not edit pass this line/////////////////////// if (slideimages.length>1) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",100) } else{ tlayer.top=scrollerheight tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",100) } else{ tlayer2.top=scrollerheight tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){ tdiv.style.pixelTop=0 setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2)",pausebetweenimages) return } if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){ tdiv.style.pixelTop-=5 setTimeout("move3(tdiv)",100) } else{ tdiv.style.pixelTop=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){ tdiv2.style.pixelTop=0 setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2)",pausebetweenimages) return } if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){ tdiv2.style.pixelTop-=5 setTimeout("move4(second2)",100) } else{ tdiv2.style.pixelTop=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (document.all){ move3(first2) second2.style.top=scrollerheight } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=scrollerheight+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide> <layer id="first" left="0" top="1" width="1" height="200" z-index="1" > <p><script language="JavaScript1.2"> if (document.layers) document.write(slideimages[0]) </script> </layer> <layer id="second" left="0" top="0" width="1" height="200" z-index="1"> <p><script language="JavaScript1.2"> if (document.layers) document.write(slideimages[1]) </script> </layer> <p></ilayer> <script language="JavaScript1.2"> if (document.all){ document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+'; overflow:hiden;background-color:'+scrollerbgcolor+'">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+'; clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">') document.write(slideimages[1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</span>') } </script> <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br> <a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

Galeria obrazów

Galeria z miniaturami. Moim zdaniem jeden z najlepszych sposobów przedstawiania rzeczywistej wielkości grafiki po kliknięciu na miniaturkę lub link.

HEAD:
<script> //Thumbnail image viewer- //Š Dynamic Drive (www.dynamicdrive.com) //For full source code, usage terms, and 100's more DHTML scripts, visit http://www.dynamicdrive.com var ie=document.all var ns=document.layers var ns6=document.getElementById&&!document.all function enlarge(which,e){ //Render image code for IE 4+ and NS6 if (ie||ns6){ crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage if (crossobj.style.visibility=="hidden"){ crossobj.style.left=ns6? pageXOffset+e.clientX : document.body.scrollLeft+event.clientX crossobj.style.top=ns6? pageYOffset+e.clientY : document.body.scrollTop+event.clientY crossobj.innerHTML='<div align=right id=drag><b onClick=closepreview()>X</b></div><img src="'+which+'">' crossobj.style.visibility="visible" } else crossobj.style.visibility="hidden" return false } //Render image code for NS 4 else if (document.layers){ if (document.showimage.visibility=="hide"){ document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>') document.showimage.document.close() document.showimage.left=e.x document.showimage.top=e.y document.showimage.visibility="show" } else document.showimage.visibility="hide" return false } //if NOT IE 4+ or NS 4, simply display image in full browser window else return true } function closepreview(){ crossobj.style.visibility="hidden" } </script> <script language="JavaScript1.2"> //By Dynamicdrive.com //drag drop function for NS 4//// ///////////////////////////////// var nsx,nsy,nstemp function drag_dropns(name){ temp=eval(name) temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) temp.onmousedown=gons temp.onmousemove=dragns temp.onmouseup=stopns } function gons(e){ temp.captureEvents(Event.MOUSEMOVE) nsx=e.x nsy=e.y } function dragns(e){ temp.moveBy(e.x-nsx,e.y-nsy) return false } function stopns(){ temp.releaseEvents(Event.MOUSEMOVE) } //drag drop function for IE 4+ and NS6//// ///////////////////////////////// function drag_drop(e){ if (ie&&dragapproved){ crossobj.style.left=tempx+event.clientX-offsetx crossobj.style.top=tempy+event.clientY-offsety } else if (ns6&&dragapproved){ crossobj.style.left=tempx+e.clientX-offsetx crossobj.style.top=tempy+e.clientY-offsety } return false } function initializedrag(e){ if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){ offsetx=ie? event.clientX : e.clientX offsety=ie? event.clientY : e.clientY tempx=parseInt(crossobj.style.left) tempy=parseInt(crossobj.style.top) dragapproved=true document.onmousemove=drag_drop } } document.onmousedown=initializedrag document.onmouseup=new Function("dragapproved=false") </script>

BODY:
<div id="showimage" style="position:absolute;visibility:hidden;border:1px solid black"></div> <a href="../design/des9.jpg" onClick="return enlarge('../design/des9.jpg',event)"><img src="../design/miniatury/des9.jpg" border="0"></a><br><br><br> <a href="../design/des9.jpg" onClick="return enlarge('../design/des9.jpg',event)">To jest link tekstowy. Klikając na niego zobaczysz plik graficzny w pełnym rozmiarze</a>

Popshadow

Efekt uginania sie obrazka/przycisku po kliknięciu.

HEAD:
<style>  </style> <script language="JavaScript1.2"> /* Pop-up Image Script- � Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ function updownshadow(){ if (event.srcElement.className=="popshadow"){ tempobject=event.srcElement if (event.type=="mousedown"){ tempobject.filters[0].enabled=false tempobject.style.left=tempobject.style.top=0 } else{ tempobject.filters[0].enabled=true tempobject.style.left=tempobject.style.top=-5 } } } if (document.all){ document.body.onmousedown=updownshadow document.body.onmouseup=updownshadow } </script>

BODY:
<img src="obrazek.gif" width="180" height="135" class="popshadow">

Pokaz slajdów

Pokaz slajdów, przeglądarka grafiki z możliwością dostosowania tła wyświetlarki i wyboru kilkunastu efektów przejścia obrazu.

HEAD:

BODY:
<style>  </style> <script language="JavaScript1.2"> //Pop-it menu- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var linkset=new Array() //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT linkset[0]='<div class="menuitems"><a href="http://dynamicdrive.com">Dynamic Drive</a></div>' linkset[0]+='<div class="menuitems"><a href="http://javascriptkit.com">JavaScript Kit</a></div>' linkset[0]+='<div class="menuitems"><a href="http://freewarejava.com">Freewarejava</a></div>' linkset[1]='<div class="menuitems"><a href="http://msnbc.com">MSNBC</a></div>' linkset[1]+='<div class="menuitems"><a href="http://cnn.com">CNN</a></div>' linkset[1]+='<div class="menuitems"><a href="http://abcnews.com">ABC News</a></div>' linkset[1]+='<div class="menuitems"><a href="http://www.washingtonpost.com">Washington Post</a></div>' ////No need to edit beyond here var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1 var ns6=document.getElementById&&!document.all var ns4=document.layers function showmenu(e,which){ if (!document.all&&!document.getElementById&&!document.layers) return clearhidemenu() menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : "" menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj if (ie4||ns6) menuobj.innerHTML=which else{ menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>') menuobj.document.close() } menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height eventX=ie4? event.clientX : ns6? e.clientX : e.x eventY=ie4? event.clientY : ns6? e.clientY : e.y //Find out how close the mouse is to the corner of the window var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<menuobj.contentwidth) //move the horizontal position of the menu to the left by it's width menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth else //position the horizontal position of the menu where the mouse was clicked menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX //same concept with the vertical position if (bottomedge<menuobj.contentheight) menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight else menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY menuobj.thestyle.visibility="visible" return false } function contains_ns6(a, b) { //Determines if 1 element in contained in another- by Brainjar.com while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function hidemenu(){ if (window.menuobj) menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide" } function dynamichide(e){ if (ie4&&!menuobj.contains(e.toElement)) hidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) hidemenu() } function delayhidemenu(){ if (ie4||ns6||ns4) delayhide=setTimeout("hidemenu()",500) } function clearhidemenu(){ if (window.delayhide) clearTimeout(delayhide) } function highlightmenu(e,state){ if (document.all) source_el=event.srcElement else if (document.getElementById) source_el=e.target if (source_el.className=="menuitems"){ source_el.id=(state=="on")? "mouseoverstyle" : "" } else{ while(source_el.id!="popmenu"){ source_el=document.getElementById? source_el.parentNode : source_el.parentElement if (source_el.className=="menuitems"){ source_el.id=(state=="on")? "mouseoverstyle" : "" } } } } if (ie4||ns6) document.onclick=hidemenu </script>

Prezentacja obrazów

Klikasz na miniaturkę a grafika w żądanej wielkości pojawia sie w odrebnym oknie.

HEAD:
<SCRIPT LANGUAGE="JavaScript">    </script>

BODY:
<div align="center"> <TABLE BORDER="1" cellspacing=3> <TR> <TD align=left> <A HREF="javascript:CaricaFoto('/img/auto-resizable-pop-up/lg-1.gif')" BORDER="0"> <IMG SRC="/img/auto-resizable-pop-up/1.gif" BORDER="0"></A> </TD> <TD align=center> <A HREF="javascript:CaricaFoto('/img/auto-resizable-pop-up/lg-2.gif')" BORDER="0"> <IMG SRC="/img/auto-resizable-pop-up/2.gif" BORDER="0"></A> </TD> <TD align=right> <A HREF="javascript:CaricaFoto('/img/auto-resizable-pop-up/lg-4.gif')" BORDER="0"> <IMG SRC="/img/auto-resizable-pop-up/4.gif" BORDER="0"></A> </TD> </TR><TR> <TD colspan=3> <DIV ALIGN="CENTER">Click for zooming the image at it's real dimensions...</DIV> </TD> </TR> </TABLE> </div> <p><center> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p>

Automatyczny pokaz slajdów

Ciekawy pokaz slajdów.

HEAD:

BODY:
<script language="JavaScript1.2"> // script by Dynamic Drive var slideshow_width=140 //SET IMAGE WIDTH var slideshow_height=225 //SET IMAGE HEIGHT var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]="photo1.jpg" fadeimages[1]="photo2.jpg" fadeimages[2]="photo3.jpg" ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<fadeimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=fadeimages[p] } var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1 var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>') else document.write('<img name="defaultslide" src="'+fadeimages[0]+'">') var curpos=10 var degree=10 var curcanvas="canvas0" var curimageindex=0 var nextimageindex=1 function fadepic(){ if (curpos<100){ curpos+=10 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos/100 } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">' nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("fadepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=fadeimages[curimageindex] curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=10 var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) if (crossobj.filters) crossobj.filters.alpha.opacity=curpos else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=curpos/100 } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script>

Pokaz slajdów scollowany pionowo

HEAD:

BODY:
<script language="JavaScript1.2"> /* script by Dynamic Drive */ ///////configure the below four variables to change the style of the slider/////// //set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow! var scrollerwidth=100 var scrollerheight=100 //3000 miliseconds=3 seconds var pausebetweenimages=3000 //configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag var slideimages=new Array() slideimages[0]='<img src="http://fullskryptor.prv.pl/borys1%20org.jpg">' slideimages[1]='<img src="http://fullskryptor.prv.pl/Bez%20nazwy%201.jpg">' slideimages[2]='<img src="http://iguana.no-limit.pl/pabianice4.jpg">' //extend this list ///////Do not edit pass this line/////////////////////// var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1 var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 if (slideimages.length>2) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",50) } else{ tlayer.top=scrollerheight tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",50) } else{ tlayer2.top=scrollerheight tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){ tdiv.style.top=0 setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2_obj)",pausebetweenimages) return } if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){ tdiv.style.top=parseInt(tdiv.style.top)-5 setTimeout("move3(tdiv)",50) } else{ tdiv.style.top=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){ tdiv2.style.top=0 setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2_obj)",pausebetweenimages) return } if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){ tdiv2.style.top=parseInt(tdiv2.style.top)-5 setTimeout("move4(second2_obj)",50) } else{ tdiv2.style.top=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (ie||dom){ first2_obj=ie? first2 : document.getElementById("first2") second2_obj=ie? second2 : document.getElementById("second2") move3(first2_obj) second2_obj.style.top=scrollerheight second2_obj.style.visibility='visible' } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=scrollerheight+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; background=&{scrollerbackground}; visibility=hide> <layer id="first" left=0 top=1 width=&{scrollerwidth};> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[0]) </script> </layer> <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) </script> </layer> </ilayer> <script language="JavaScript1.2"> if (ie||dom){ document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0;visibility:hidden">') document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</div>') } </script>

10.

Pokaz slajdów scollowany poziomo

Podobny jak poprzednie tylko poziomy.

HEAD:

BODY:
<script language="JavaScript1.2"> /* script by Dynamic Drive */ ///////configure the below four variables to change the style of the slider/////// //set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow! var scrollerwidth=140 var scrollerheight=225 var scrollerbgcolor='#D5DDE6' //3000 miliseconds=3 seconds var pausebetweenimages=3000 //configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag var slideimages=new Array() slideimages[0]='<img src="photo1.jpg">' slideimages[1]='<img src="photo2.jpg">' slideimages[2]='<img src="photo3.jpg">' //extend this list ///////Do not edit pass this line/////////////////////// if (slideimages.length>1) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.left>0&&tlayer.left<=5){ tlayer.left=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.left>=tlayer.document.width*-1){ tlayer.left-=5 setTimeout("move1(tlayer)",100) } else{ tlayer.left=scrollerwidth+5 tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.left>0&&tlayer2.left<=5){ tlayer2.left=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.left>=tlayer2.document.width*-1){ tlayer2.left-=5 setTimeout("move2(tlayer2)",100) } else{ tlayer2.left=scrollerwidth+5 tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (tdiv.style.pixelLeft>0&&tdiv.style.pixelLeft<=5){ tdiv.style.pixelLeft=0 setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2)",pausebetweenimages) return } if (tdiv.style.pixelLeft>=tdiv.offsetWidth*-1){ tdiv.style.pixelLeft-=5 setTimeout("move3(tdiv)",100) } else{ tdiv.style.pixelLeft=scrollerwidth tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (tdiv2.style.pixelLeft>0&&tdiv2.style.pixelLeft<=5){ tdiv2.style.pixelLeft=0 setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2)",pausebetweenimages) return } if (tdiv2.style.pixelLeft>=tdiv2.offsetWidth*-1){ tdiv2.style.pixelLeft-=5 setTimeout("move4(second2)",100) } else{ tdiv2.style.pixelLeft=scrollerwidth tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (document.all){ move3(first2) second2.style.left=scrollerwidth } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.left=scrollerwidth+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide> <layer id="first" left=1 top=0 width=&{scrollerwidth}; > <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[0]) </script> </layer> <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[1]) </script> </layer> </ilayer> <script language="JavaScript1.2"> if (document.all){ document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1;top:0;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">') document.write(slideimages[1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</span>') } </script>