Dodaj do ulubionych
kontakt
Skrypty:
-Slideshow -Rotator -Rotator bannerów -Prezentacja obrazów -Samoskalujący sie obrazek -Poziomy pokaz slajdów -Pokaz grafiki -Obrazek w osobnym okienku -Animator bannera -Animowany Textarea
Jeszcze jedna przeglądarka grafiki. Właściwie to wszystkie są do siebie podobne...
HEAD:
BODY: <script language="JavaScript1.2"> //Presentational Slideshow Script- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for legal use var slideshow_width='180px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist) var slideshow_height='100px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist) var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds) var slidebgcolor="white" var dropimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed dropimages[0]="../design/miniatury/des2.jpg" dropimages[1]="../design/miniatury/des3.jpg" dropimages[2]="../design/miniatury/des4.jpg" var droplinks=new Array() //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked: droplinks[0]="http://www.yahoo.com" droplinks[1]="" droplinks[2]="http://www.google.com" ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<dropimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=dropimages[p] } var ie4=document.all var dom=document.getElementById 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+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>') else document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>') var curpos=parseInt(slideshow_width)*(-1) var degree=10 var curcanvas="canvas0" var curimageindex=linkindex=0 var nextimageindex=1 function movepic(){ if (curpos<0){ curpos=Math.min(curpos+degree,0) tempobj.style.left=curpos+"px" } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>' tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage nextimageindex=(nextimageindex<dropimages.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("movepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=dropimages[curimageindex] linkindex=curimageindex curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0 } function rotatelink(){ if (droplinks[linkindex]!="") window.location=droplinks[linkindex] } function resetit(what){ curpos=parseInt(slideshow_width)*(-1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.left=curpos+"px" } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script> <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br> <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
Rotator bannerów
HEAD: <script> // Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html) function create() { this.width = '' this.height = '' this.src = '' this.href = '' this.border = '' this.mouseover = '' this.sponsor = '' } ads = new Array() for(var i=1; i<=5; i++) { ads[i] = new create() } ads[1].width = "468" ads[1].height = "60" ads[1].src = "banners/banner1.gif" ads[1].href = "http://planmagic.com/businessplanning.html" ads[1].border = "0" ads[1].mouseover = "Click here to enter the PlanMagic Business world" ads[1].sponsor = "PlanMagic Business" ads[2].width = "115" ads[2].height = "55" ads[2].src = "banners/banner2.gif" ads[2].href = "http://simplythebest.net/shareware.html" ads[2].border = "0" ads[2].mouseover = "Our Hot shareware & freeware" ads[2].sponsor = "SimplytheBest Shareware" ads[3].width = "287" ads[3].height = "60" ads[3].src = "banners/banner3.gif" ads[3].href = "http://simplythebest.net" ads[3].border = "0" ads[3].mouseover = "Do we need to say more?" ads[3].sponsor = "Simply the Best" ads[4].width = "468" ads[4].height = "60" ads[4].src = "banners/banner4.gif" ads[4].href = "http://planmagic.com/marketingplanning.html" ads[4].border = "0" ads[4].mouseover = "Marketing planning software" ads[4].sponsor = "PlanMagic Marketing" ads[5].width = "468" ads[5].height = "60" ads[5].src = "banners/banner5.gif" ads[5].href = "http://webquestpro.com" ads[5].border = "0" ads[5].mouseover = "Enter the world of professional online marketing" ads[5].sponsor = "WebQuest Pro" var n = Math.random() + '' n = parseInt(n.charAt(5)) if(n >5) { n = n - 5 } else if(n==0) { n = n + 5 } n += "" var image = ads[n] var ad = "" ad += '<a href="' + image.href + '" \n' ad += 'onMouseOver="self.status=\'' + image.mouseover + '\'\;return true" \n' ad += 'onMouseOut="self.status=\'\'"> \n' ad += '<img src="' + image.src + '" width=' + image.width ad += '\n height=' + image.height + ' border=' + image.border ad += '\n><br>Please visit our sponsor: ' + image.sponsor + '</a>' </script>
BODY: <script language="JavaScript"> <!-- hiding this script document.write(ad) // --> </script>
HEAD: <SCRIPT LANGUAGE="javascript"> <!-- Copyright 2000 - Galichon Enterprises, Inc. rich@galichon.net http://www.galichon.net // Permission granted to SimplytheBest.net to list the script in the DHTML scripts library // Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html) function banner(img_source,url,alt,chance) { this.img_source = img_source; this.url = url; this.alt = alt; this.chance = chance; } function display() { with (this) document.write("<A HREF=" + url + "><IMG SRC='" + img_source + "' WIDTH=468 HEIGHT=60 BORDER=0 ALT='" + alt + "'></A>"); } banner.prototype.display = display; banners = new Array(); banners[0] = new banner("banners/banner1.gif", "http://planmagic.com/webquest.html target='_blank'", "PlanMagic WebQuest Pro", 10); banners[1] = new banner("banners/banner2.gif", "http://planmagic.com/marketingplanning.html target='_blank'", "PlanMagic Marketing", 30); banners[2] = new banner("banners/banner3.gif", "http://planmagic.com/businessplanning.html target='_blank'", "PlanMagic Business", 20); sum_of_all_chances = 0; for (i = 0; i < banners.length; i++) { sum_of_all_chances += banners[i].chance; } function display_banner() { chance_limit = 0; randomly_selected_chance = Math.round((sum_of_all_chances - 1) * Math.random()) + 1; for (i = 0; i < banners.length; i++) { chance_limit += banners[i].chance; if (randomly_selected_chance <= chance_limit) { document.write("<A HREF=" + banners[i].url + "><IMG SRC='" + banners[i].img_source + "' WIDTH=468 HEIGHT=60 BORDER=0 ALT='" + banners[i].alt + "'></A>"); return banners[i]; break; } } } //--> </SCRIPT>
BODY: <SCRIPT LANGUAGE="javascript"> <!-- top_banner = display_banner(); //--> </SCRIPT>
Klikasz na miniaturkę a grafika w żądanej wielkości pojawia sie w odrebnym oknie.
HEAD: <SCRIPT LANGUAGE="JavaScript"> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin function CaricaFoto(img){ foto1= new Image(); foto1.src=(img); Controlla(img); } function Controlla(img){ if((foto1.width!=0)&&(foto1.height!=0)){ viewFoto(img); } else{ funzione="Controlla('"+img+"')"; intervallo=setTimeout(funzione,20); } } function viewFoto(img){ largh=foto1.width+20; altez=foto1.height+20; stringa="width="+largh+",height="+altez; finestra=window.open(img,"",stringa); } // End --> </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>
Niedowidzisz od gapienia się w ekran - ten skrypt jest w sam raz dla Ciebie!.
HEAD: <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Ed Churnside --> <!-- Web Site: http://www.dragonquest.com/inddpl.htm --> <!-- Additional documention available online at --> <!-- http://www.dragonquest.com/dplsspic.htm --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin function showpic(src, w, h, alt, aln, pw, ph, bw, bh) { if (src == null) return; var iw, ih; // Set inner width and height if (window.innerWidth == null) { iw = document.body.clientWidth; ih=document.body.clientHeight; } else { iw = window.innerWidth; ih = window.innerHeight; } if (w == null) w = iw; if(h == null) h = ih; if(alt == null) alt = "Picture"; if(aln == null) aln = "left"; if(pw == null) pw = 100; if(ph == null) ph = 100; if(bw == null) bw = 24; if(bh == null) bh = 24; var sw = Math.round((iw - bw) * pw / 100); var sh = Math.round((ih - bh) * ph / 100); if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h); else sh = Math.round(h * sw / w); document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">'); } // End --> </script>
BODY: <script language="javascript"> showpic("../grafa/logo_01.jpg", 162, 113, "A crows of people", "middle"); </script> <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> <!-- Script Size: 1.64 KB -->
Doskonały sposób pokazywania grafiki. Łatwa konfiguracja.
BODY: <script language="JavaScript1.2"> <!-- /* Conveyor belt slideshow script- Š Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ //Specify the slider's width (in pixels) var sliderwidth=330 //Specify the slider's height (in pixels, pertains only to NS) var sliderheight=100 //Specify the slider's scroll speed (larger is faster) var slidespeed=4 //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://"><img src="../design/miniatury/des7.jpg" border=1></a>' leftrightslide[1]='<a href="http://"><img src="../design/miniatury/des8.jpg" border=1></a>' leftrightslide[2]='<a href="http://"><img src="../design/miniatury/des9.jpg" border=1></a>' leftrightslide[3]='<a href="http://"><img src="../design/miniatury/des10.jpg" border=1></a>' leftrightslide[4]='<a href="http://"><img src="../design/miniatury/des11.jpg" border=1></a>' ///////do NOT edit pass this line//////////////////////////////////// var copyspeed=slidespeed //copy contents of leftrightslide into one variable for (i=0;i<leftrightslide.length;i++) finalslide=finalslide+leftrightslide[i]+" " if (document.all){ //dynamically write out the marquee tag document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>') //stop marquee when mouse is over it ieslider.onmouseover=new Function("ieslider.scrollAmount=0") //re-enable marquee when mouse is out ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed") } function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers){ document.ns_slider01.visibility="show" setTimeout("window.onresize=regenerate",450) intializeleftrightslide() } if (document.all) ieslider.scrollAmount=slidespeed } //NS specific function for initializing slider upon page load function intializeleftrightslide(){ document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>') document. ns_slider01.document.ns_slider02.document.close() thelength=document.ns_slider01.document.ns_slider02.document.width scrollslide() } //NS specific function for sliding slideshow function scrollslide(){ if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){ document.ns_slider01.document.ns_slider02.left-=slidespeed setTimeout("scrollslide()",100) } else{ document.ns_slider01.document.ns_slider02.left=sliderwidth scrollslide() } } window.onload=regenerate2 //--> </script> <ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide> <layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed"></layer> </ilayer>
Ciekawy sposób pokazywania grafiki za pomocą pola select. Bardzo łatwa konfiguracja. Do obrazków można podpiąć linki.
BODY: <script language="javascript"> <!-- function linkrotate(which){ var mylinks=new Array() //add in more links if you want (ie:mylinks[3]=...) mylinks[0]="http://www.zama.republika.pl" mylinks[1]="http://www.zama.republika.pl" mylinks[2]="http://www.zama.republika.pl" window.location=mylinks[which] } function showimage() { if (!document.images) return document.images.pictures.src= document.mygallery.picture.options[document.mygallery.picture.selectedIndex] .value } //--> </script> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" align="center"><form name="mygallery" style="display:inline;"><p><select name="picture" class="ace" size="1" onChange="showimage()"> <option selected value="../design/miniatury/des9.jpg">Grafika 1</option> <option value="../design/miniatury/des10.jpg">Grafika 2</option> <option value="../design/miniatury/des11.jpg">Grafika 3</option> </select></form> </td> </tr> <tr> <td width="100%"><p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="../design/miniatury/des12.jpg" name="pictures" width="100" height="60" border=0></a></td> </tr> </table>
Swoistego rodzaju menu do pokazywania obrazków, które ukazują się w osobnym okienku.
BODY: <SCRIPT language="JavaScript"> function display_image(form) { selectionname = form.imagename.options[form.imagename.selectedIndex].text; selection = form.imagename.options[form.imagename.selectedIndex].value; PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width=200,height=255"); PreView.document.open(); PreView.document.write("<HTML><HEAD>"); PreView.document.write("<TITLE>Podgląd</TITLE>"); PreView.document.write("</HEAD><BODY BGCOLOR=909898 TEXT=CDCDCD>"); PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" + selectionname + "</FONT></B><HR>"); PreView.document.write("<IMG HSPACE=0 VSPACE=0 " + "SRC='" + selection + "'>"); PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Zamknij' " + "onClick='window.close()'></FORM>"); PreView.document.write("</CENTER>"); PreView.document.write("</BODY></HTML>"); PreView.document.close(); } </SCRIPT> <FORM> <select NAME="imagename" onChange="display_image(this.form)"> <option value="../design/miniatury/des5.jpg" SELECTED>Obrazek 1 <option value="../design/miniatury/des6.jpg">Obrazek 2 <option value="../design/miniatury/des7.jpg">Obrazek 3 </select> </FORM>
Skrypt powoduje "pływanie" bannera między bokami okna strony
BODY: <p align="center"> <marquee behavior="alternate" width="668" height="19"><SCRIPT>document.write("<a href='http://www.javascript.scrypty.com/'><IMG src='pliki_potrzene_do_przykladow/1.gif' border='0'></a>");</SCRIPT></marquee> </p>
BODY: <p align="center"><!--webbot bot="HTMLMarkup" startspan --><SCRIPT LANGUAGE="JavaScript"> <!-- Original: Hapaboy (happynoodleboy@mindless.com) --> <!-- Web Site: http://www.geocities.com/SouthBeach/Palms/6999 --> <!-- Begin var message=" www.JavaScript.scrypty.com"; var spc=10; var speedisplay=50; var times=2; var rows=5; var cols=40; var stopbutton="yes"; // yes or no var stopbuttonvalue=" STOP "; var startvalue=" START "; var len=spc*2; var text=message; var i; var stop=false; var stoppedisplay; for (i=0;i<spc;i++) { text=text+" "; } function array(n) { this.length = n for (i=1; i <= n; i++) { this[i] =""; } return this; } document.writeln('<form name="F">') document.writeln('<textarea rows='+rows+' cols='+cols+' name="display" wrap=soft>