• Aktualisierte Forenregeln

    Eine kleine Änderung hat es im Bereich Forenregeln unter Abschnitt 2 gegeben, wo wir nun explizit darauf verweisen, dass Forenkommentare in unserer Heftrubrik Leserbriefe landen können.

    Forenregeln


    Vielen Dank

HTML-Wechselnde Bilder mit Übergang

mpwfg41

NPC
Mitglied seit
22.11.2022
Beiträge
3
Reaktionspunkte
0
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:
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:

Worrel

Spiele-Guru
Mitglied seit
22.03.2001
Beiträge
24.155
Reaktionspunkte
9.710
Mich wundert , daß hier "einblenden" in den CSS Parametern auf deutsch steht und nicht sowas wie "fadein"

Code:
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 */
}
 
TE
TE
M

mpwfg41

NPC
Mitglied seit
22.11.2022
Beiträge
3
Reaktionspunkte
0
Danke für den Hinweis. Aber:
"p.einblenden" ist der Name einer Klasse und kann ja auch "Hund" oder "Katze" lauten. Eine Änderung in den anderen Zeilen bringt keine Änderung, außer, wenn man "-webkit-animation: fadeln 2.5.....usw" eingibt, geht die Einblendung auch beim ersten Bild nicht mehr.
Schade - was wäre eine einfache Lösung gewesen.
 

Worrel

Spiele-Guru
Mitglied seit
22.03.2001
Beiträge
24.155
Reaktionspunkte
9.710
Hier ein gefundenes Beispiel:
Code:
.fade-in-image { animation: fadeIn 5s; }

".fade-in-image" ist der frei wählbare Klassenname.
Bei "fadeIn" hingegen gehe ich davon aus, daß das eine festgelegte Animationsfunktion ist, deren Parameter du in den "keyframe" Zeilen nur festlegst - ich denke, den Namen darfst du ebensowenig verändern, wie du einen "border" Effekt im Stylesheet einfach mit den Buchstaben "Rand" definieren könntest.
 
TE
TE
M

mpwfg41

NPC
Mitglied seit
22.11.2022
Beiträge
3
Reaktionspunkte
0
Also ich habe jetzt den Code aus dem empfohlenen Link (blob.hubspot.com) versucht. Der Ablauf ist absolut der gleiche wie in meinem ursprünglichen Code. Das erste Bild der Serie wird einwandfrei eingeblendet, alle folgenden Bilder und auch bei Wiederbeginn der Serie werden "hart" eingefügt. Es gibt übrigens im Web zahlreiche Beispiele mit "einblenden" statt "fadeIn". Das scheint also keine Rolle zu spielen, wie ich jetzt auch nachvollzogen habe.
Mein Problem scheint offensichtlich im Bildwechsel zu legen.
Trotzdem besten Dank für die Hinweise;man wird ja nur klüger dabei.
 
Oben Unten