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, you can use a rather simple Java script slideshow:


<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 picture delay time.
blendTrans (duration = .. crossFadeDuration = change in brightness when displaying images, which sets the delay parameter and brightness.

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






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

<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 the script to a specific image, 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>

There are many numbers, but everything is simple - the initial transparency of the image here is alpha (opacity = 60), the parameters for changing the brightness are set by the final and initial transparency of the alpha filter in%: nereidFade (this, 100,30,10) , and the third number is the step for changing it (the more the step - the faster the change, here when hovering the transparency will grow from 30 to 100% with a step of +10 when hovering: onmouseover and after mouseover : onmouseout will fall from 50 to 25%)

Now it’s just a matter of picking pictures, and your visitors will be pleasantly surprised how you managed to design the web page in such an original way ..






The following script smoothly changes the color of the link when you hover the cursor on 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, insert the parameter in its tag:
<b> <a href="http:" name="fading_link1" class="fade"> Link 1 </a> <br>
<a href="http:" name="fading_link2" class="fade"> Link 2 </a> </ b>