Adventskalender

olle-beat · 5. November 2017

Hallo an alle!

Ich bin gerade dabei mir einen Adventskalender zu basteln. Allerdings komme ich da gerade nicht weiter und erhoffe mir ein wenig Hilfe.

In Sachen Javascript stehe ich noch so ziemlich am Anfang..

Zu meinem Projekt:

Ich habe mir mit Photoshop meine beiden Bilder in 24 Teile zerschnitten. Nun wollte ich das man per Mausklick das Bild ändert.

Das hab ich soweit erstmal hinbekommen. Nun soll das aber auch nur an den bestimmten Tagen funktionieren. Und wenn man am nächsten Tag die Seite aufruft, dann sollen die bereits angeklickten Bilder sichtbar bleiben..

Ich habe jetzt schon drei unterschiedliche Varianten ausprobiert, komme aber zu keinem Erfolg

HTML

<html>
<head>
<title>Adventskalender</title>

<script type="text/javascript">
function switchImage(img, imgSrc){
    if (imgSrc != "none"){
        img.src = imgSrc;
    }
}
</script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (pic1_full.jpg) -->
<table id="Tabelle_01" width="620" height="1020" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_01.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_01.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_02.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_02.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_03.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_03.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_04.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_04.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_05.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_05.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_06.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_06.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_07.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_07.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_08.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_08.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_09.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_09.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_10.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_10.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_11.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_11.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_12.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_12.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_13.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_13.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_14.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_14.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_15.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_15.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_16.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_16.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_17.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_17.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_18.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_18.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_19.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_19.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_20.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_20.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_21.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_21.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_22.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_22.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_23.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_23.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_24.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_24.gif')"></a></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Alles anzeigen

Habe dann versucht den Quellcode einzubinden..

Code

heute = new Date();
    Tag = heute.getDate();
    Monat = heute.getMonth() + 1;
    if (Monat == 11 && Tag >= 1)

..und nun klemmt die Säge. Es soll halt nur das Bild geändert werden und keine neue Seite geöffnet werden.

Außer an einem falschen Datum, da soll ein Popup aufgehen..

Sempervivum · 6. November 2017

*smile* oh ja, jetzt kommt wieder die Zeit der Adventskalender ...

Mit dem Date-Objekt warst Du schon auf dem richtigen Weg. Was für den Vergleich noch fehlt, ist die Nummer des Tages für das Bild. Die habe ich mal durch Javascript hinzu gefügt, damit man es nicht von Hand editieren muss. Dies sollte funktionieren:

Code

<table id="Tabelle_01" width="620" height="1020" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_01.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_01.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_02.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_02.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_03.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_03.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_04.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_04.gif')"></a>
            </td>
        </tr>
        <tr>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_05.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_05.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_06.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_06.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_07.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_07.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_08.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_08.gif')"></a>
            </td>
        </tr>
        <tr>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_09.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_09.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_10.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_10.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_11.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_11.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_12.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_12.gif')"></a>
            </td>
        </tr>
        <tr>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_13.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_13.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_14.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_14.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_15.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_15.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_16.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_16.gif')"></a>
            </td>
        </tr>
        <tr>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_17.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_17.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_18.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_18.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_19.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_19.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_20.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_20.gif')"></a>
            </td>
        </tr>
        <tr>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_21.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_21.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_22.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_22.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_23.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_23.gif')"></a>
            </td>
            <td>
                <img src="/Adventskalender/img/fst_px/px01_24.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_24.gif')"></a>
            </td>
        </tr>
    </table>
    <script>
        // Schleife ueber alle Bilder
        var images = document.querySelectorAll("#Tabelle_01 td img");
        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute("data-day", i + 1); // Nummer des Tages als data-Attribut hinzu fuegen
            images[i].src = "http://lorempixel.com/output/nature-q-c-160-160-5.jpg"; // nur zum Test
        }
        function switchImage(img, imgSrc) {
            now = new Date();
            day = now.getDate();
            month = now.getMonth() + 1;
            day = 3; // nur zum Test
            month = 12; // nur zum Test
            if (month == 12 && day >= img.getAttribute("data-day")) {
                console.log("ok");
                if (imgSrc != "none") {
                    img.src = imgSrc;
                }
            }
        }
    </script>

Alles anzeigen

Zitat

Und wenn man am nächsten Tag die Seite aufruft, dann sollen die bereits angeklickten Bilder sichtbar bleiben..

Das kannst Du erreichen, indem Du im Local-Storage speicherst, wenn ein Türchen geöffnet wurde.

olle-beat · 8. November 2017

Erstmal vielen Dank für deine Hilfe! Ich habe mich jetzt die letzten Tage damit beschäftigt und es auch einigermaßen hinbekommen...zumindest zum Teil.

Ich kann jetzt alle Fenster öffnen und beim falschen Datum kommt ein Popup mit einer "Fehlermeldung". Zwei Problemchen habe ich allerdings noch..

Das mit dem Local-Storage bekomm ich einfach nicht hin bzw ist für meine Anfängerkenntnisse noch viel zu hoch. Ich hatte auch schon paar Schwierigkeiten mich durch dein Script zu kämpfen. Ich kann momentan auch nur die Bilder von oben links nach unten rechts öffnen, möchte das aber unterschiedlich verteilt machen. Ich denke auch mal, dass es mit dem data-Attribut zusammenhängt. Ich habe es auch schon versucht irgendwie mit einzufügen, aber sicherlich mache ich da noch was falsch.. siehe (...img src="/Adventskalender/img/fst_px/px01_21.gif" data-day="3" name="image" onclick="swi...)

HTML

<html>
<head>
<title>Adventskalender</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Tabelle_01" width="620" height="1020" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_01.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_01.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_02.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_02.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_03.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_03.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_04.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_04.gif')"></a></td>
    </tr>
...
...
...
...
...
        <td>
            <img src="/Adventskalender/img/fst_px/px01_21.gif" data-day="3" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_21.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_22.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_22.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_23.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_23.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_24.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_24.gif')"></a></td>
    </tr>
</table>
    <script>
        var images = document.querySelectorAll("#Tabelle_01 td img");
        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute("data-day", i + 1);         
        }
        function switchImage(img, imgSrc) {
            now = new Date();
            day = now.getDate();
            month = now.getMonth() + 1;
            if (month == 11 && day >= img.getAttribute("data-day")) {
                console.log("ok");
            if (imgSrc != "none") {
                    img.src = imgSrc;
        }
                
            }
        else
        msg=window.open("schade.html", "msg", 'scrollbars=no,width=400,height=350,left=100,top=100')
        msg.focus()
        }
    </script>
</body>
</html>

Alles anzeigen

Sempervivum · 8. November 2017

Kein Problem, die Tage zufällig verteilt anzulegen. Aber müsste man dann nicht auch die Bilder anders verteilen?

"/Adventskalender/img/fst_px/px01_01.gif" ist doch explizit für den 1. Dezember, usw., nicht wahr?

olle-beat · 9. November 2017

Die Imagemap wurde so von Photoshop ausgegeben. Ich kann die Bilder auch anders anordnen, aber dann kann ich trotzdem nur von oben links anfangen, die Bilder zu öffnen..

Habe ich das mit dem data-Attribut so richtig verstanden, oder bin ich da völlig auf dem Holzweg?

Sempervivum · 9. November 2017

Das data-Attribut legt fest, zu welchen Tag das Bild gehört, also bei data-day="14" würde das Bild zum 14. Dezember gehören. Wenn ich diese Zahl jetzt dem ersten Bild zuordne, passt es doch nicht, denn das Bild "/Adventskalender/img/fst_px/px01_1.gif" gehört doch zum 1. Dezember oder nicht? Oder ist das egal? Ich weiß ja nicht, wie die Bilder aussehen.

olle-beat · 12. November 2017

Die Zuordnung der Bildnamen spielt keine Rolle. Ich hab mir zwei Bilder genommen und diese per Slice-Tool in Photoshop in 24 kleine Bilder geschnitten. Die Reihenfolge kann ich in Photoshop schonmal nicht ändern. Es beginnt immer oben links mit der 1 bis zur 24 unten rechts. Ich hatte gedacht, dass ich die Bilder nun mit dem data-Attribut durcheinander zurodnen kann. Aber irgendwie klappt das nicht bzw mache ich sicherlich was falsch dabei.

So sieht mein Quelltext momentan aus..

HTML

<html>
<head>
<title>Adventskalender</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Tabelle_01" width="620" height="1020" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_01.gif" data-day="7" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_01.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_02.gif" data-day="14" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_02.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_03.gif" data-day="17" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_03.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_04.gif" data-day="2" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_04.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_05.gif" data-day="20" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_05.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_06.gif" data-day="1" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_06.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_07.gif" data-day="13" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_07.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_08.gif" data-day="9" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_08.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_09.gif" data-day="10" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_09.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_10.gif" data-day="16" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_10.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_11.gif" data-day="6" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_11.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_12.gif" data-day="21" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_12.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_13.gif" data-day="5" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_13.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_14.gif" data-day="22" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_14.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_15.gif" data-day="24" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_15.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_16.gif" data-day="15" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_16.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_17.gif" data-day="19" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_17.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_18.gif" data-day="8" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_18.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_19.gif" data-day="23" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_19.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_20.gif" data-day="11" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_20.gif')"></a></td>
    </tr>
    <tr>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_21.gif" data-day="3" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_21.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_22.gif" data-day="12" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_22.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_23.gif" data-day="18" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_23.gif')"></a></td>
        <td>
            <img src="/Adventskalender/img/fst_px/px01_24.gif" data-day="4" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_24.gif')"></a></td>
    </tr>


</table>
    <script>
        var images = document.querySelectorAll("#Tabelle_01 td img");
        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute("data-day", i + 1);         
        }
        function switchImage(img, imgSrc) {
            now = new Date();
            day = now.getDate();
            month = now.getMonth() + 1;
            if (month == 11 && day >= img.getAttribute("data-day")) {
                console.log("ok");
            if (imgSrc != "none") {
                    img.src = imgSrc;
        }
                
            }
        else
        msg=window.open("schade.html", "msg", 'scrollbars=no,width=400,height=350,left=100,top=100')
        msg.focus()
        }
    </script>
</body>
</html>

Alles anzeigen

Oder muss ich das data-Attribut in der Javasript Funktion zuordnen?

Sempervivum · 12. November 2017

Du hast nicht wirklich einen Fehler gemacht, aber das Javascript macht dir einen Strich durch die Rechnung, denn es nummeriert hiermit die Tage neu:

Code

        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute("data-day", i + 1); // Nummer des Tages als data-Attribut hinzu fuegen
            images[i].src = "http://lorempixel.com/output/nature-q-c-160-160-5.jpg"; // nur zum Test
        }

Wenn Du das löschst, bleiben deine Einträge erhalten.

olle-beat · 12. November 2017

Ganz großes Dankeschön!

RFunden · 15. November 2017

Hi,

ich bin leider noch totaler Anfänger und frage mich nun wie man statt "onclick" das bild am Tag ohne zuklicken anzeigen kann?

Sempervivum · 15. November 2017

Hängt das mit deinem früheren Wunsch zusammen, die Bilder, die angeklickt wurden, bei einem späteren Aufruf der Seite gleich zu öffnen?

Ich empfehle, die URL des zweiten Bildes ebenfalls in einem data-Attribut zu speichern und in swichImage darauf zuzugreifen:

Code

<img src="/Adventskalender/img/fst_px/px01_01.gif" data-day="7"
 data-img="/Adventskalender/img/scd_px/px02_01.gif" name="image" onclick="switchImage(this)">

Code

         function switchImage(img) {
            now = new Date();
            day = now.getDate();
            month = now.getMonth() + 1;
            if (month == 11 && day >= img.getAttribute("data-day")) {
                var imgSrc = img.getAttribute("data-img");
                if (imgSrc != "none") {
                    img.src = imgSrc;
                }
                
            } else {
                msg=window.open("schade.html", "msg", 'scrollbars=no,width=400,height=350,left=100,top=100')
                msg.focus()
            }
        }

Alles anzeigen

Dann kannst Du für einen bestimmten Tag das Bild folgender Maßen öffnen:

Code

switchImage(document.querySelector("img[data-day='7']");

Adventskalender

Jetzt mitmachen!

Teilen