Hi Stryder. Es gibt mehrere Möglichkeiten sowas zu machen, aber ohne Javascript wird das nicht gehen. Schau mal auf eine Probeseite von meiner Page: http://home.pages.at/vogelhackla/privat/index2.htm
Dort klickst auf -Urlaubsbilder-. Wenn dir sowas gefällt, dann hast hier das Skript:
Einfügen gleich nach dem Head und vor Body, also zwischen
</head> und <body>: Und noch was, schau das die Bilder aller die selbe Größe haben, und pass das Skript am Beginn gleich auf deine Bildgröße an. Wenn du weniger bilder hast als ich hier im Skript, dann einfach die Zeile löschen, oder falls du mehr verwenden willst, einfach dementsprechend hinzufügen.
lg. Kojak
<script language="JavaScript1.2" type="text/javascript">
var slideshow_width='395px' //SET IMAGE WIDTH
var slideshow_height='295px' //SET IMAGE HEIGHT
var pause=4000 //SET PAUSE BETWEEN SLIDE (4000=4 seconds)
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="photo1.jpg"
fadeimages[1]="photo2.jpg"
fadeimages[2]="photo3.jpg"
fadeimages[3]="photo4.jpg"
fadeimages[4]="photo5.jpg"
fadeimages[5]="photo6.jpg"
fadeimages[6]="photo7.jpg"
fadeimages[7]="photo8.jpg"
fadeimages[8]="photo9.jpg"
fadeimages[9]="photo10.jpg"
fadeimages[10]="photo11.jpg"
fadeimages[11]="photo12.jpg"
fadeimages[12]="photo13.jpg"
fadeimages[13]="photo14.jpg"
fadeimages[14]="photo15.jpg"
fadeimages[15]="photo16.jpg"
fadeimages[16]="photo17.jpg"
fadeimages[17]="photo18.jpg"
fadeimages[18]="photo19.jpg"
fadeimages[19]="photo20.jpg"
fadeimages[20]="photo21.jpg"
fadeimages[21]="photo22.jpg"
fadeimages[22]="photo23.jpg"
fadeimages[23]="photo24.jpg"
////Ab hier nichts ändern/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
