Hallo,
bei meiner Frage geht es nicht um Spiele, aber ich habe einen sehr alten Beitrag zu meinem Problem gefunden, der jedoch leider nicht funktioniert, deshalb stelle ich das Thema neu.
Ich möchte in einer Web-Seite beim Start mehrere Bilder nacheinander an der gleichen Stelle einblenden, mit gleitendem Übergang.
Nachstehend der gesamt Code:
Das erste Bild wird einwandfrei weich eingeblendet, die nachfolgenden erscheinen jedoch 'hart', ansonsten funktioniert der Ablauf einwandfrei.
Kann mir jemand sagen, was am Code falsch ist.
bei meiner Frage geht es nicht um Spiele, aber ich habe einen sehr alten Beitrag zu meinem Problem gefunden, der jedoch leider nicht funktioniert, deshalb stelle ich das Thema neu.
Ich möchte in einer Web-Seite beim Start mehrere Bilder nacheinander an der gleichen Stelle einblenden, mit gleitendem Übergang.
Nachstehend der gesamt Code:
HTML:
<html>
<head>
<title>Startbild</title>
<meta name="author" content="xyz">
<meta name="editor" content="html-editor phase 5">
<script src="js/script.js"></script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<style type="text/css">
p.einblenden{
animation: einblenden 2.5s;
-moz-animation: einblenden 2.5s; /* Für Firefox */
-webkit-animation: einblenden 2.5s; /* Für Safari und Chrome */
-o-animation: einblenden 2.5s; /* Für Opera */
}
@keyframes einblenden {
from { opacity:0; }
to { opacity:1; }
}
@-moz-keyframes einblenden { /* Für Firefox */
from { opacity:0; }
to { opacity:1; }
}
@-webkit-keyframes einblenden { /* Für Safari und Chrome */
from { opacity:0; }
to { opacity:1; }
}
@-o-keyframes einblenden { /* Für Opera */
from { opacity:0; }
to { opacity:1; }
}
</style>
</head>
<BODY onLoad="fct_bild_wechseln()">
<p class="einblenden">
<img src="img/101_0766_1.jpg" p class = "einblenden" name = "titelbild" alt = "" title = "Kommentar_zum_Bild"
border="1" width="50%" height="auto">
</p>
<div >
<table >
<tr><td id="unterschrift" >unterschrift</td></tr>
</table>
</div>
<div >
<table id = "tabelle" style="display:none">
<tr><td id="0" >img/101_0084.jpg</td> <td id="10" >img/101_0084.jpg</td></tr>
<tr><td id="1" >img/101_0083.jpg</td> <td id="11" >img/101_0083.jpg</td></tr>
<tr><td id="2" >img/101_0084.jpg</td> <td id="12" >img/101_0084.jpg</td></tr>
<tr><td id="3" >img/101_0039.jpg</td> <td id="13" >img/101_0039.jpg</td></tr>
</table>
</div>
<script language="javascript">
var time = 6000;
var b = 0;
function fct_bild_wechseln() {
var anzahl=tabelle.getElementsByTagName("tr").length;
var text_nr = b + 10;
var bildname = document.getElementById(b).innerHTML;
var text = document.getElementById(text_nr).innerHTML;
var unterschrift = b + 1 + " von " + anzahl + " - Dateiname = " + text;
//------------------ die folgende Zeile hat keine Wirkung --------------
document.titelbild.class="einblenden";
//----------------------------------------------------------------------
document.titelbild.src = bildname;
document.getElementById("unterschrift").innerHTML = unterschrift;
b ++;
setTimeout("fct_bild_wechseln()",time);
if (b == anzahl) {
b = 0;
}
}
</script>
</body>
</html>Das erste Bild wird einwandfrei weich eingeblendet, die nachfolgenden erscheinen jedoch 'hart', ansonsten funktioniert der Ablauf einwandfrei.
Kann mir jemand sagen, was am Code falsch ist.
Zuletzt bearbeitet von einem Moderator:
