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:
<![CDATA[<code>&lt;SCRIPT&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 &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 &gt; (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } &lt;/SCRIPT&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 displaying 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 parameter <BODY .. onload = runSlideShow () and in the place where the pictures 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 the mouse over it:
<![CDATA[<code>&lt;SCRIPT&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 &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); } } &lt;/SCRIPT&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% with a step 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 over the cursor:
<![CDATA[<code><script>document.onmouseover = domouseover; document.onmouseout = domouseout; function domouseover() { if(document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") > -1) { var linkName = srcElement.name; fadein(linkName); } } } function domouseout() { if (document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") > -1) { var linkName = srcElement.name; fadeout(linkName); } } } function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } hexa = new makearray(16); for(var i = 0; i < 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 < 0) return "00"; else if (i > 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 <= 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); } </script></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>
Comments
When commenting on, remember that the content and tone of your message can hurt the feelings of real people, show respect and tolerance to your interlocutors even if you do not share their opinion, your behavior in the conditions of freedom of expression and anonymity provided by the Internet, changes Not only virtual, but also the real world. All comments are hidden from the index, spam is controlled.