Slideshow wird im IE überblendet

[Johannes123]

Hallo liebe Javaner,

könnt ihr mir beoi folgendem helfen?
Ich habe eine Slideshow auf meine Homepage Ferienwohnungen Ostsee | Ostsee Urlaub - Fischland-Darss-Zingst .
Im Firefox funktioniert sie einwandfrei.
Im IE liegt eine weiße Überblendung auf der Slideshow - warum?:noe:

Hier der Java Code:

// JavaScript Document

var fadeimages=new Array()
fadeimages[0]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/fruehling.jpg"] 
fadeimages[1]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(1).jpg"]
fadeimages[2]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(2).jpg"]
fadeimages[3]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(3).jpg"]
fadeimages[4]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(4).jpg"]
fadeimages[5]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(5).jpg"]
fadeimages[6]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(6).jpg"]
fadeimages[7]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(7).jpg"]
fadeimages[8]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(8).jpg"]
fadeimages[9]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(9).jpg"]
fadeimages[10]=["http://www.ostsee-ferienwohnungen-urlaub.de/bilder/a(10).jpg"]


var fadebgcolor="white"

var fadearray=new Array() 
var fadeclear=new Array() 
var dom=(document.getElementById) 
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=40 
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();}) 
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() 
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) 
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;filterrogidX ImageTransform.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;filterrogidX ImageTransform.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) 
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") 
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]!="") 
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]!="") 
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) 
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==1){ 
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()
}

 

[.Domii]

JAVA != JAVASCRIPT!

Java hat nichts mit JavaScript zu tun..^^ oke den Namen.. xD ALSO HIER:
Für Verirrte - Fragen zu JavaScript - java-forum.org

2. Zu deinem Problem:
Internet Explorer macht was Darstellung betrifft sowieso immer was er will.. Würde dir Empfehlen zu überprüfen was genau darüber liegt?!

Was noch sein kann - Beim ein & ausblenden schauen ob internet explorer da anders reagiert!^^

(Für alle nach mir: Ferienwohnungen Ostsee | Ostsee Urlaub - Fischland-Darss-Zingst seine Seite - seht euch das Problem an)

 

[Johannes123]

Oh ok sorry. Das habe ich nicht bedacht.Danke dir 😉 Ja du hast die Seite schon - danke.
Ich lasse das Thema mal noch offen - vielen Dank für eure Unterstützung 🙂

 

[Schandro]

[OT]Warum benutzt du nicht bspw. jQuery? Wäre viel weniger code, einfacher zu lesen und das Problem würde wahrscheinlich garnicht auftreten.[/OT]

 

[nillehammer]

Zunächst schließe ich mich Schandro's Tipp an. Nimm lieber ein fertiges Framework für sowas. Macht mehr Spaß und ist auch gut ausgetestet.

Und zu Deiner Frage, ich habe nicht 100% verstanden, was alles in dem Script abläuft, aber ein paar Anmerkungen habe ich. Vielleicht helfen sie Dir ja auf die richtige Spur:
CSS-Opacity:
Ich habe mal rumgegoogelt nach "Cross Browser CSS opacity". Habe das hier gefunden:
Cross-Browser Compatible CSS Opacity
Deine Lösung weicht davon ab. Dieser String hier:

filterrogidX ImageTransform.Microsoft.alpha(opacity=10)

scheint irgendwie falsch. Müsste es nicht so sein:

filter:alpha(opacity=10)

?

Außerdem besteht noch ein logischer Fehler (glaub ich). In den Zeilen 48 und 53 hast Du diese if-Abfrage:

if (iebrowser&&dom||dom)

Die ist immer wahr, wenn

dom

wahr ist,

iebrowser

hat darauf keinen Einfluss. Wenn das beabsichtig ist, entferne es, wenn das keine Absicht ist, ist das vielleicht auch noch eine Fehlerquelle.