Ganz großes Dankeschön!
Beiträge von olle-beat
-
-
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
Alles anzeigen<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>Oder muss ich das data-Attribut in der Javasript Funktion zuordnen?
-
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?
-
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
Alles anzeigen<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> -
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
Alles anzeigen<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>Habe dann versucht den Quellcode einzubinden..
Codeheute = 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..