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

Diaporama JavaScript



Si vous souhaitez placer beaucoup d'images sur un espace limité d'une page Web, vous pouvez utiliser un diaporama de script Java plutôt simple:


<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>

Ici
1.jpg, 2.jpg, 3.jpg - génèrent des images séquentielles à partir du dossier / img / site / java_slideshow /
var slideShowSpeed ​​= 3000 délais d'image.
blendTrans (duration = .. crossFadeDuration = modification de la luminosité lors de l'affichage d'images, ce qui définit le paramètre de délai et la luminosité.

Pour activer votre diaporama dans la balise <Body>, insérez le paramètre suivant <BODY .. onload = runSlideShow () . À l'emplacement où les images seront directement affichées, vous devez insérer: <IMG class = img name = SlideShow src = "/ img / site / java_slideshow /1.jpg ">






Ensuite, je vais donner un exemple de script Java qui change la luminosité de l’image lorsque vous passez la souris dessus:

<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>

Pour appliquer le script à une image spécifique, vous devez insérer le code suivant:

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

Il y a beaucoup de nombres, mais tout est simple - la transparence initiale de l'image ici est alpha (opacité = 60), les paramètres de modification de la luminosité sont définis par la transparence finale et initiale du filtre alpha dans%: nereidFade (this, 100,30,10) , et le troisième nombre est l'étape pour le modifier. (Plus le pas est rapide - plus le changement est rapide, ici, lorsque vous passez la souris sur l' écran, la transparence passera de 30 à 100%, avec un saut de +10, lorsque vous survolez : onmouseover et après le survol de la souris: onmouseout passera de 50 à 25%)

Désormais, il ne reste plus qu’à choisir des images et vos visiteurs seront agréablement surpris de la façon dont vous avez réussi à concevoir la page Web de manière aussi originale.






Le script suivant modifie en douceur la couleur du lien lorsque vous déplacez le curseur dessus:

<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>

La couleur est définie à la fin du script au format RVB:
fonction fadeout (élément) {fade (255,0,0, 0,0,255, 20, 1, élément); }
fonction fadein (element) {fade (0,0,255, 255,0,0, 20, 1, element); }

Après avoir appelé le script pour changer la couleur du lien, insérez le paramètre dans sa balise:
<b> <a href="http:" name="fading_link1" class="fade"> Lien 1 </a> <br>
<a href="http:" name="fading_link2" class="fade"> Lien 2 </a> </ b>