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

Diaporama JavaScript



Si vous souhaitez placer beaucoup de photos sur un espace limité d'une page Web, vous pouvez utiliser un script de diaporama Java assez 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 - afficher séquentiellement les images du dossier / img / site / java_slideshow /
var slideShowSpeed ​​= 3000 délais pour la sortie des images.
blendTrans (duration = .. crossFadeDuration = change la luminosité lors de l'affichage des images, ce qui définit le paramètre de délai et de luminosité.

Pour activer votre diaporama dans la balise <Body>, collez le paramètre <BODY .. onload = runSlideShow () et à l'endroit où les images seront affichées directement: <IMG class = img name = Diaporama \ src = "/ img / site / java_slideshow /1.jpg ">






Ensuite, je vais vous donner un exemple de script Java qui modifie la luminosité d'une image lorsque vous passez la souris sur le curseur de la souris:

<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 un script à une image particulière, 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 = ".." hauteur = ".."> </A>

Les nombres sont nombreux, mais tout est simple - la transparence initiale de l'image est ici alpha (opacité = 60), les paramètres pour changer la luminosité sont donnés par la transparence finale du filtre alpha dans%: nereidFade (this, 100,30,10) (plus le pas est grand, plus le changement est rapide, ici, lorsque la transparence passe de 30 à 100% par incréments de +10 en survol : onmouseover et après avoir survolé la souris: onmouseout passera de 50 à 25%)

Maintenant, c'est seulement le choix des images, et vos visiteurs seront agréablement surpris de la façon dont vous avez réussi à concevoir la page Web si originale.






Le script suivant modifie en douceur la couleur du lien lorsque vous passez 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) {fondu (255,0,0, 0,0,255, 20, 1, élément); }
fonction fadein (element) {fade (0,0,255, 255,0,0, 20, 1, élément); }

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