nicht angemeldet
Hallo nochmal.
Weil ich heute gut drauf bin hier die Lösung deines Problems: ;o)
HTML-Datei:
<html>
<head>
<title>Fader</title>
<link rel="stylesheet" type="text/css" href="fade.css">
<script src="fade.js" type="text/javascript"></script>
</head>
<body onload="init();">
<div class="bild1" id="div1-1"><img src="img/bild1-1.jpg" alt=""/></div>
<div class="bild1" id="div1-2"><img src="img/bild1-2.jpg" alt=""/></div>
<div class="bild1" id="div1-3"><img src="img/bild1-3.jpg" alt=""/></div>
<div class="bild2" id="div2-1"><img src="img/bild2-1.jpg" alt=""/></div>
<div class="bild2" id="div2-2"><img src="img/bild2-2.jpg" alt=""/></div>
<div class="bild2" id="div2-3"><img src="img/bild2-3.jpg" alt=""/></div>
</body>
</html>
CSS-Datei:
div
{
margin: 0px;
padding: 0px;
}
div.bild1
{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
}
div.bild2
{
position: absolute;
top: 100px;
left: 200px;
width: 120px;
height: 120px;
}
div.bild1, div.bild2
{
visibility: hidden;
}
Und das wichtigste am Schluss, die JavaScript-Datei:
/* Basiert auf dem Code von www.jojoxx.net
*
* The code contained in this file is copyrighted by www.jojoxx.net
* The file may be used for none commercial applications and distributed
* as long as these lines remain intact. The file or part of it may not
* be sold or included in any other commercial application without
* agreement from the author. If you have questions or comments, contact
* the author at http://www.jojoxx.net
*
* © Copyright - www.jojoxx.net - 2004
*/
function fade(m,n,diff,opacity)
{
divId = divs[m][n];
//alert("divId is "+divId);
//alert(document.getElementById(divId).style.MozOpacity);
opacity = (opacity) ? opacity : (diff < 0) ? 100 : 0; opacity += diff;
// diese Browserweiche ist problematisch, da Mozilla inzwischen
// auch klammheimlich das document.all Modell unterstuetzt
if (document.getElementById && document.all)
{
// Internet Explorer
document.getElementById(divId).style.filter = "alpha(opacity=" + opacity + ")";
}
else
{
// Mozilla (Gecko)
if(document.getElementById && !document.all)
{
document.getElementById(divId).style.MozOpacity = opacity/100;
}
}
document.getElementById(divId).style.visibility = "visible";
if(opacity >= 99)
{
zindex[m]++;
document.getElementById(divId).style.zIndex = zindex[m];
setTimeout("fade("+ m + "," + n + ",-" + diff + "," + opacity + ");",2000);
nn = (n == divs[m].length-1) ? 0 : n+1;
setTimeout("fade("+ m + "," + nn + "," + diff + ");",2000);
}
else
{
if(opacity > 0)
{
setTimeout("fade("+ m + "," + n + "," + diff + "," + opacity + ");",30);
}
}
}
function init()
{
// Assoziatives Array fuer die Bilderlisten
divs = new Array();
zindex = new Array();
// erste ID-Liste der zu fadenden DIVs
divs[0] = new Array();
divs[0][0] = "div1-1";
divs[0][1] = "div1-2";
divs[0][2] = "div1-3";
zindex[0] = 0;
// zweite ID-Liste der zu fadenden DIVs
divs[1] = new Array();
divs[1][0] = "div2-1";
divs[1][1] = "div2-2";
divs[1][2] = "div2-3";
zindex[1] = 0;
// ... etc ...
// das Ueberblenden starten
fade(0,0,1);
fade(1,0,1);
}
Viel Spaß damit!
Du wird sowieso noch Anpassungen durchfuehren muessen. :-))
Gruß
L00NIX