This page has been robot translated, sorry for typos if any. Original content here.

Slide Show JavaScript



If you want to place a lot of pictures on a limited space of a web page, then you can use a fairly simple Java slideshow script:


<code>&amp;lt;SCRIPT&amp;gt; var slideShowSpeed = 3000 var crossFadeDuration = 3 var Pic = new Array() Pic[0] = '/img/site/java_slideshow/1.jpg' Pic[1] = '/img/site/java_slideshow/2.jpg' Pic[2] = '/img/site/java_slideshow/3.jpg' var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i &amp;lt; p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j &amp;gt; (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } &amp;lt;/SCRIPT&amp;gt;</code>

Here
1.jpg, 2.jpg, 3.jpg - sequentially output images from the folder / img / site / java_slideshow /
var slideShowSpeed ​​= 3000 time delay for outputting images.
blendTrans (duration = .. crossFadeDuration = change the brightness when displaying pictures, which sets the delay and brightness parameter.

To activate your slideshow in the <Body> tag, paste the following <BODY .. onload = runSlideShow () parameter and in the place where the images will be displayed directly: <IMG class = img name = SlideShow src = "/ img / site / java_slideshow /1.jpg ">






Next, I'll give you an example of a Java script that changes the brightness of a picture when you hover over the mouse cursor:

<code>&amp;lt;SCRIPT&amp;gt; nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity &amp;gt; destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } &amp;lt;/SCRIPT&amp;gt;</code>

To apply a script to a particular picture, you need to insert the following code:

<A href=" ..big.jpg"> <IMG onmouseover = nereidFade (this, 100,30,10) style = "FILTER: alpha (opacity = 60)" onmouseout = nereidFade (this, 25,50,10) src = ".. small.jpg" border = 0 width = ".." height = ".."> </A>

Numbers are many, but everything is simple - the original transparency of the image here is alpha (opacity = 60), the parameters for changing the brightness are given by the final and initial transparency of the alpha filter in%: nereidFade (this, 100,30,10) , and the third number is the step of changing it (the larger the step, the faster the change, here when hovering the transparency will increase from 30 to 100% in increments of +10 when hovering: onmouseover and after hovering the mouse: onmouseout will drop from 50 to 25%)

Now it's only the choice of pictures, and your visitors will be pleasantly surprised how you managed to design the web page so original.






The following script smoothly changes the color of the link when you hover the cursor over it:

<code>&lt;script&gt;document.onmouseover = domouseover; document.onmouseout = domouseout; function domouseover() { if(document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") &gt; -1) { var linkName = srcElement.name; fadein(linkName); } } } function domouseout() { if (document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") &gt; -1) { var linkName = srcElement.name; fadeout(linkName); } } } function makearray(n) { this.length = n; for(var i = 1; i &lt;= n; i++) this[i] = 0; return this; } hexa = new makearray(16); for(var i = 0; i &lt; 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; function hex(i) { if (i &lt; 0) return "00"; else if (i &gt; 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function setbgColor(r, g, b, element) { var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; } function fade(sr, sg, sb, er, eg, eb, step, direction, element){ for(var i = 0; i &lt;= step; i++) { setTimeout("setbgColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); } } function fadeout(element) { fade(255,0,0, 0,0,255, 20, 1, element); } function fadein(element) { fade(0,0,255, 255,0,0, 20, 1, element); } &lt;/script&gt;</code>

The color is set at the end of the script in RGB format:
function fadeout (element) {fade (255,0,0, 0,0,255, 20, 1, element); }
function fadein (element) {fade (0,0,255, 255,0,0, 20, 1, element); }

After calling the script to change the color of the link in its tag, insert the parameter:
<b> <a href="http:" name="fading_link1" class="fade"> Link 1 </a> <br>
<a href="http:" name="fading_link2" class="fade"> Link 2 </a> </a> </ b>