nicht angemeldet
Bilder-Überblendung für IE und Mozilla
Hallo zusammen,
ich hab ein kleines Script gebastelt, das Bilder überblenden kann und bei Internet Explorer >= 4.0 und Firefox >= 1.5 funktioniert.
Falls es jemand verwenden möchte, nur zu!
<html>
<head>
<style type="text/css">
<!--
#overlay { position:absolute; top:10px; left:100px; width:900px; height:150px; z-index:4; }
#animation1 { position:absolute; top:10px; left:100px; width:900px; height:150px; z-index:2; }
#animation2 { position:absolute; top:10px; left:100px; width:900px; height:150px; z-index:3; }
#status { position:absolute; top:200px; left:100px; width:900px; height:150px;}
-->
</style>
<script type="text/javascript">
// config stuff
var image_time = 3000; // show the images for X ms time
var fade_time = 1000; // fade animation takes X ms time
var fade_steps = 10; // devide fade animation into X steps
// images to show
var images = new Array();
var i = 0;
images[i] = new Image(); images[i].src = "images/image1.jpg"; i++;
images[i] = new Image(); images[i].src = "images/image2.png"; i++;
images[i] = new Image(); images[i].src = "images/image3.jpg"; i++;
f = 0;
i = images.length-1;
blank = new Image();
blank.src = "images/blank.png";
var status;
var animation1;
var animation2;
var fadein;
var fadeout;
var isMozilla = false;
var isIE = false;
var init = false;
function init_function() {
status = document.getElementById("status").firstChild;
animation1 = document.images["animation1"];
animation2 = document.images["animation2"];
fadein = animation1;
fadeout = animation2;
if (animation1.style.MozOpacity!=null)
isMozilla = true;
else if (animation1.style.filter != null) {
isIE = true;
}
}
function setAlpha(element, value) {
if (isMozilla) {
element.style.MozOpacity = value/100;
}
if (isIE) {
element.style.filter = "Alpha(opacity="+value+")";
}
}
function Animation() {
if (!init) {
init = true;
init_function();
}
// change images?
if (f == fade_steps) {
i = (i+1)%images.length;
f = 0;
// find correct image order
if ((i % 2) == 0) {
fadein = animation1;
fadeout = animation2;
}
else {
fadein = animation2;
fadeout = animation1;
}
if (isIE || isMozilla) {
fadeout.src = images[(i+3)%3].src;
fadein.src = images[(i+4)%3].src;
// change alpha values
setAlpha(fadein, 0);
setAlpha(fadeout, 100);
/*status.nodeValue += "----------------------------------------------\r\n"+
"f="+f+"\r\n"+
"i="+i+"\r\n"+
"fade in: "+fadein.src+" "+fadein.style.MozOpacity+"\r\n"+
"fade out: "+fadeout.src+" "+fadeout.style.MozOpacity+"\r\n";*/
//status.nodeValue += ((i+3)%3)+" => "+((i+4)%3)+"\r\n";
window.setTimeout("Animation()", image_time);
return;
}
}
else {
// continue/start fading...
f++;
// change alpha value
var value = f*(100/fade_steps);
setAlpha(fadein, value);
setAlpha(fadeout, 100-value)
/*status.nodeValue += "f="+f+"\r\n"+
"i="+i+"\r\n"+
"fade in: "+fadein.src+" "+fadein.style.MozOpacity+"\r\n"+
"fade out: "+fadeout.src+" "+fadeout.style.MozOpacity+"\r\n";*/
window.setTimeout("Animation()", fade_time/fade_steps);
}
}
window.setTimeout("Animation()", 3000)
</script>
</head>
<body bgcolor="#000000">
<img id="animation1" src="images/image1.jpg" />
<img id="animation2" src="images/image3.jpg" />
<pre id="status" style="color: white;"> </pre>
</body>
</html>
-
Hi,
ich hab ein kleines Script gebastelt, das Bilder überblenden kann und bei Internet Explorer >= 4.0 und Firefox >= 1.5 funktioniert.
BTW: opacity wird bereits von allen üblichen Browsern unterstützt - seit geraumer Zeit auch vom Mozilla.
MozOpacity (analog auch KhtmlOpacity) ist also nur 2. Wahl, und nur eine Freundlichkeit Benutzern sehr alter Mozillas gegenüber (so wie KhtmlOpacity eine Freundlicheit gegenüber Benutzern von alten Konquerors und Safaris gewesen wäre).
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
BTW: opacity wird bereits von allen üblichen Browsern unterstützt - seit geraumer Zeit auch vom Mozilla.
MozOpacity (analog auch KhtmlOpacity) ist also nur 2. Wahl, und nur eine Freundlichkeit Benutzern sehr alter Mozillas gegenüber (so wie KhtmlOpacity eine Freundlicheit gegenüber Benutzern von alten Konquerors und Safaris gewesen wäre).
Oh, danke. Werd ich ins Script einbauen.
-
-
Hallo,
ich hab ein kleines Script gebastelt, das Bilder überblenden kann und bei Internet Explorer >= 4.0 und Firefox >= 1.5 funktioniert.
... gut gemacht. Deinen Ansatz mit 2 überlappenden Bildern finde ich überzeugend.
Jetzt habe ich mal deine Technik in mein Script eingebaut. Dabei dachte ich mir, das 2. Bild lässt sich sicher doch auch dynamisch per javascript unter das erste Bild schieben, ohne dass man im Dokument mit zusätzlichen styles hantieren muss.
Aber da hapert es doch an meinen CSS-Kenntnissen und ich frage hier mal um Rat.
Gehen wir mal von solch einer Struktur aus<div> <p>ein Bild im Textfluss soll animiert werden <img id="img1" alt="" src="..." > <br>nach Zeilenumbruch hier eine Bilderklärung</p> <p> nächster Absatz .... </div>Wie muss man nun CSS anpassen, damit sich beide Bilder überdecken und der übrige Textfluss nicht gestört wird?
<style type="text/css"> #img1 { position:relative; left:0; top:-400px; } /* img.height=400 */ </style> <div> <p>ein Bild im Textfluss soll animiert werden <img id="subimg1" alt="durchschimmernd" src="..." > <img id="img1" alt="oben liegendes Bild" src="..." > <!-- hier klafft jetzt eine Lücke von 400px Höhe ----> <br>nach Zeilenumbruch hier eine Bilderklärung</p> <p> nächster Absatz .... </div>bisher habe ich noch keine Lösung für eine einwandfreie Darstellung gefunden.
hier habe ich mal meinen Test hochgeladen: http://btools.bt.funpic.de/self/fade_img.htm
Gruß plan_B
--
*®*´¯`·.¸¸.·-
Hi!
2 Bilder uebereinander aber trotzdem im textfluss. Hm. Da faellt mir nur ein Container ein. Du baust also ein Element von der Groesse eines Bildes in den Text ein und gibst ihm position:relative. Da schiebsty du dann beide Bilder mit position:absolute rein. Sollte funktionieren.
-
Hallo,
2 Bilder uebereinander aber trotzdem im textfluss. Hm. Da faellt mir nur ein Container ein. Du baust also ein Element von der Groesse eines Bildes in den Text ein und gibst ihm position:relative. Da schiebsty du dann beide Bilder mit position:absolute rein. Sollte funktionieren.
ja funktioniert, allerdings nur wenn der Container ein Blockelement ist. Ich hatte angenommen, dass es auch mit einem <span>-Container funktinieren könnte, aber nachfolgender Text, schiebt sich dann immer unter den Container.
danke dir
Gruß plan_B
--
*®*´¯`·.¸¸.·-
Je nach Wunsch laesst sich da ja viel mit CSS machen. Floats, z.b.
-
-
-