In diesem Tutorial erkläre ich dir, wie du einen Fade Effekt bei Bildern machst. Das kannst du bei deinem Header einsetzen oder bei einer Bildershow etc.

Das ist das Script:
<script type="text/javascript"> /*********************************************** * Ultimate Fade-In Slideshow (v1.51): Dynamic Drive (http://www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ var fadeimages=new Array() //Arrayerzeugung fadeimages[0]=["Bild1.png", "", ""] fadeimages[1]=["Bild2.png", "", ""] fadeimages[2]=["Bild3.png", "", ""] fadeimages[3]=["Bild4.png", "", ""] var fadebgcolor="#000000" var fadearray=new Array() //array to cache fadeshow instances var fadeclear=new Array() //array to cache corresponding clearinterval pointers var dom=(document.getElementById) //modern dom browsers var iebrowser=document.all function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){ this.pausecheck=pause this.mouseovercheck=0 this.delay=delay this.degree=10 //initial opacity degree (10%) this.curimageindex=0 this.nextimageindex=1 fadearray[fadearray.length]=this this.slideshowid=fadearray.length-1 this.canvasbase="canvas"+this.slideshowid this.curcanvas=this.canvasbase+"_0" if (typeof displayorder!="undefined") theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :) this.theimages=theimages this.imageborder=parseInt(borderwidth) this.postimages=new Array() //preload images for (p=0;p<theimages.length;p++){ this.postimages[p]=new Image() this.postimages[p].src=theimages[p][0] } var fadewidth=fadewidth+this.imageborder*2 var fadeheight=fadeheight+this.imageborder*2 if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox) document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>') else document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>') if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox this.startit() else{ this.curimageindex++ setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay) } } function fadepic(obj){ if (obj.degree<100){ obj.degree+=10 if (obj.tempobj.filters&&obj.tempobj.filters[0]){ if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+ obj.tempobj.filters[0].opacity=obj.degree else //else if IE5.5- obj.tempobj.style.filter="alpha(opacity="+obj.degree+")" } else if (obj.tempobj.style.MozOpacity) obj.tempobj.style.MozOpacity=obj.degree/101 else if (obj.tempobj.style.KhtmlOpacity) obj.tempobj.style.KhtmlOpacity=obj.degree/100 else if (obj.tempobj.style.opacity&&!obj.tempobj.filters) obj.tempobj.style.opacity=obj.degree/101 } else{ clearInterval(fadeclear[obj.slideshowid]) obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1" obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas) obj.populateslide(obj.tempobj, obj.nextimageindex) obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0 setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay) } } fadeshow.prototype.populateslide=function(picobj, picindex){ var slideHTML="" if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">' slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">' if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML+='</a>' picobj.innerHTML=slideHTML } fadeshow.prototype.rotateimage=function(){ if (this.pausecheck==1) //if pause onMouseover enabled, cache object var cacheobj=this if (this.mouseovercheck==1) setTimeout(function(){cacheobj.rotateimage()}, 100) else if (iebrowser&&dom||dom){ this.resetit() var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) crossobj.style.zIndex++ fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50) this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0" } else{ var ns4imgobj=document.images['defaultslide'+this.slideshowid] ns4imgobj.src=this.postimages[this.curimageindex].src } this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0 } fadeshow.prototype.resetit=function(){ this.degree=10 var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) if (crossobj.filters&&crossobj.filters[0]){ if (typeof crossobj.filters[0].opacity=="number") //if IE6+ crossobj.filters(0).opacity=this.degree else //else if IE5.5- crossobj.style.filter="alpha(opacity="+this.degree+")" } else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=this.degree/101 else if (crossobj.style.KhtmlOpacity) crossobj.style.KhtmlOpacity=this.degree/100 else if (crossobj.style.opacity&&!crossobj.filters) crossobj.style.opacity=this.degree/101 } fadeshow.prototype.startit=function(){ var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) this.populateslide(crossobj, this.curimageindex) if (this.pausecheck==0){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER var cacheobj=this var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid) crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1} crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0} } this.rotateimage() } </script>

Das Script kommt in den Head Bereich, also zwischen
<head> und </head>

Recht oben am Anfang des Codes steht:

var fadeimages=new Array()
//Arrayerzeugung
fadeimages[0]=["Bild1.png", "", ""]
fadeimages[1]=["Bild2.png", "", ""]
fadeimages[2]=["Bild3.png", "", ""]
fadeimages[3]=["Bild4.png", "", ""]

Dort wo "Bild1.png", "Bild2.png" usw. steht, kommen die Adressen der Bilder rein, die angezeigt werden sollen und sich wechseln sollen. Die Zahlen in den Klammern, [0] bis [3], zeigen an, wie viele Bilder sich wechseln. Im Moment sind es also 4 Bilder, weil die Zählung hier mit 0 anfängt und nicht mit 1. Wenn du nun aber willst, dass sich mehr Bilder wechseln, dann kopierst du einfach:
fadeimages[3]=["Bild4.png", "", ""]

Das fügst du dann direkt unter:
fadeimages[3]=["Bild4.png", "", ""]
ein und schreibst bei [3], dann eine 4 rein, das sieht dann so aus:
fadeimages[4]=["Bild4.png", "", ""]

Wenn du jetzt noch mehr Bilder haben möchtest, dann kopierst du wieder eine der Zeilen und schreibst eine 5 in das [ ] Kästchen und immer so weiter. So viele Bilder, wie du halt haben willst.

Direkt unter dem Code, wo du die Bilder eingefügt hast, steht:
var fadebgcolor="#000000"

Bei "#000000" schreibst du die Hintergrundfarbe rein, die der Fade Effekt haben soll. Sonst wird nichts an diesem Code bearbeitet!

Das Script
<script type="text/javascript"> new fadeshow(fadeimages, 323, 240, 0, 3000, 1, "R") </script>

Dieses Script ist dazu da, um die Größe der Bilder einzustellen. Bei 323 gibst du ein, wie breit das Bild ist. Bei 240 gibst du ein, wie hoch das Bild ist. Bei 0 gibst du ein, ob deine Bilder einen Rahmen haben sollen, oder nicht. Wenn du die 0 stehen lässt, dann haben sie keinen Rahmen. Wenn du nun z.B. eine 2 eingibst, dann haben sie einen Rahmen, der 2px breit ist.

Das Script von Schritt 2 fügst du nun in ein Div ein, damit du es an die Stelle in deinem Layout platzieren kannst, wo du es haben möchtest. Das sieht dann so aus:
<div style="position: absolute; left: 145; top: 70; width: 100; height: 150;"> <script type="text/javascript"> new fadeshow(fadeimages, 323, 240, 0, 3000, 1, "R") </script></div>

Oder du platzierst es mit Css, wenn du weißt wie das geht.

Script by DynamicDrive.com