Hallo Forum,
Jaja, ich weis, dass es im IE irgendwie eine eigene Fade() Funktion gibt.
Trotzdem wäre es mir lieb, wenn mein Code ohne größere Änderungen und Verwirrungen noch im InternetExplorer gehen würde. Versteht jeder, was ich meine? Wahrscheinlich nicht. ;-)
Also folgendes:
Ich hab jetzt zwei Dateien, eine Fade.js und eine HTML
In der HTML habe ich folgenden (irgendwie viel zu komplizierten) Code:
<script type="text/javascript" src="Fade.js"></script>
<script type="text/javascript">FX=100</script>
<body OnLoad="document.getElementById('x1').value=FX">
Dauer: <input id="x1" OnChange="FX=Math.abs(this.value)" style="text-align:right"> ms
<div id="f1" style="position:absolute;z-index:1">
<table cellspacing=0 cellpadding=0><tr>
<td><img src="SFC/I3.png"></td>
<td style="background-image:url('SFC/I5.bmp');width:100px;text-align:center;font-family:'Segoe UI',Verdana;font-size:12px">OK</td>
<td><img src="SFC/I4.png"></td></tr></table></div>
<div id="f2" style="position:absolute;z-index:3;opacity:0">
<table cellspacing=0 cellpadding=0><tr>
<td><img src="SFC/H1.png"></td>
<td style="background-image:url('SFC/H2.png');width:100px;text-align:center;font-family:'Segoe UI',Verdana;font-size:12px">OK</td>
<td><img src="SFC/H3.png"></td></tr></table></div>
<div id="f3" style="position:absolute;z-index:3;opacity:0" OnMouseDown="FadeIn('f3',FX)" OnMouseOver="FadeIn('f2',FX)" OnMouseOut="FadeOut('f2',FX)" OnMouseUp="FadeOut('f3',FX)">
<table cellspacing=0 cellpadding=0><tr>
<td><img src="SFC/I7.png"></td>
<td style="background-image:url('SFC/I9.png');width:100px;text-align:center;font-family:'Segoe UI',Verdana;font-size:12px">OK</td>
<td><img src="SFC/I8.png"></td></tr></table></div>
</body>
In der Fade.js steht folgendes:
function FadeIn(ElementA,duration) {
var a
var x = "document.getElementById('"+ElementA+"')"
for(a=0;a<duration;a++){
window.setTimeout(x+".style.opacity=Math.abs("+x+".style.opacity)+(1/"+duration+")",a)
}}
function FadeOut(ElementA,duration) {
var a
var x = "document.getElementById('"+ElementA+"')"
for(a=0;a<duration;a++){
window.setTimeout(x+".style.opacity=Math.abs("+x+".style.opacity)-(1/"+duration+")",a)
}}
So, im Firefox passiert bei mir folgendes:
Wenn ich mit der Maus auf den "Button" (div id=f3) gehe wird der zweite eingefadet. Theoretisch passiert noch mehr, aber das ist ya auch egal.
Wichtig ist, dass im IE garnichts passiert. Also, woran könnte es liegen?
Wie oben erwähnt würde ich es am liebsten zumindest vorerst ohne irgendwelche Browserspeifischen Funktionen machen.
Könnt ihr mir helfen?
Danke,
Jannis