Ich hab ma was gebastelt. Ist aber noch recht optimierungsbedürftig. Funktioniert aber bereits für IE und Firefox. Opera zickt noch, wie zu erwarten war.
Ich poste ma das Script hier rein und hänge eine Demo an mit Beispielbildern.
Hätte ich gewusst, dass das so lang würd, hätt ich damit garnicht erst angefangen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script type="text/javascript">
/* ------------------ WEBSTATT.ORG ----------------------- */
var Starterbild = "Bild1" //Name vom Starterbild eintragen!
var check = 0; //Verhindert Mehrfachladen...
// Browser-Check //
function init(BildNr) {
if(navigator.appName=="Netscape" {
Bumper = new MozillaBumper(BildNr); return; }
if(navigator.appName=="Microsoft Internet Explorer" {
Bumper = new IEBumper(BildNr); return; }
}
// .... -> Mozilla Init //
function MozillaBumper(BildNr) {
if(MozSlider.BildName=='' {
MozSlider.BildName=Starterbild; }
if((BildNr==MozSlider.BildName) || (check==1)) { return; }
check=1;
MozSlider.BildName2=BildNr;
document.images[BildNr].style.zIndex=0;
MozSlider.HideWert=1.0;
MozSlider.ShowWert=0;
MozSlider.MozHide();
MozSlider.MozShow();
}
// .... -> IE Init //
function IEBumper(BildNr) {
if(IESlider.BildName=='' {
IESlider.BildName=Starterbild; }
if((BildNr==IESlider.BildName) || (check==1)) { return; }
check=1;
IESlider.BildName2=BildNr;
document.images[BildNr].style.zIndex=0;
IESlider.HideWert=100;
IESlider.ShowWert=0;
IESlider.IEHide();
IESlider.IEShow();
}
// Script für Mozilla //
MozSlider = {
HideWert : 0, ShowWert : 0,
BildName : '', BildName2 : '',
// Verstecke 1. Bild //
MozHide : function() {
MozSlider.HideWert-=0.03;
if(MozSlider.roundedMzWert(MozSlider.HideWert)>0) {
document.images[MozSlider.BildName].style.MozOpacity=MozSlider.roundedMzWert(MozSlider.HideWert);
setTimeout("MozSlider.MozHide()", 100); }
else {
document.images[MozSlider.BildName].style.MozOpacity=0;
document.images[MozSlider.BildName].style.zIndex=-1
}
},
// Zeige 2. Bild //
MozShow : function() {
MozSlider.ShowWert+=0.03;
if(MozSlider.roundedMzWert(MozSlider.ShowWert)<1) {
document.images[MozSlider.BildName2].style.MozOpacity=MozSlider.roundedMzWert(MozSlider.ShowWert);
setTimeout("MozSlider.MozShow()", 100); }
else {
document.images[MozSlider.BildName2].style.MozOpacity=1;
document.images[MozSlider.BildName2].style.zIndex=1;
MozSlider.BildName=MozSlider.BildName2;
check=0;
}
},
// Del Rundungsfehler //
roundedMzWert : function(Wert) {
Wert=Wert.toString();
Wert=Wert.substr(0,4);
return Wert;
}
},
// Script für IE //
IESlider = {
HideWert : 100, ShowWert: 0,
BildName : '', BildName2 : '',
// Verstecke 1. Bild //
IEHide : function() {
IESlider.HideWert-=10;
if(IESlider.HideWert>0) {
document.images[IESlider.BildName].style.filter="Alpha(opacity="+IESlider.HideWert+"";
setTimeout("IESlider.IEHide()", 100); }
else {
document.images[IESlider.BildName].style.filter="Alpha(opacity=0)";
document.images[IESlider.BildName].style.zIndex=-1
}
},
// Zeige 2. Bild //
IEShow : function() {
IESlider.ShowWert+=5;
if(IESlider.ShowWert<100) {
document.images[IESlider.BildName2].style.filter="Alpha(opacity="+IESlider.ShowWert+"";
setTimeout("IESlider.IEShow()", 100); }
else {
document.images[IESlider.BildName2].style.filter="Alpha(opacity="+100+"";
document.images[IESlider.BildName2].style.zIndex=1;
IESlider.BildName=IESlider.BildName2;
check=0;
}
}
}
</script>
</head>
<body>
<img name="Bild1" src="bild1.gif" style="z-index:1; position:absolute; left:10px; top: 10px;">
<img name="Bild2" src="bild2.gif" style="z-index:0; position:absolute; left:10px; top: 10px;">
<img name="Bild3" src="bild3.gif" style="z-index:-1; position:absolute; left:10px; top: 10px;">
<div id="Links" style="position:absolute; top: 400px;">
<a href="javascript:init('Bild1'">Link 1 </a><br>
<a href="javascript:init('Bild2'">Link 2 </a><br>
<a href="javascript:init('Bild3'">Link 3 </a><br>
<br>
</div>
</body>
</html>
Gruß
René