html adventskranz?
hallo ich habe vor auf meiner website einen adventskranz einzubauen
da ich allerdings keinen zugriff auf php habe und die html codes die ich gefunden habe nicht das sind wonach ich suche bräuchte ich hilfe
INFO:ich hoste die website nicht selbst sondern sie wird von einen anbieter betrieben ich habe also keinen zugriff auf die dateien,es ist mir aber möglich die bilder hochzuladen und dann per link zugriff zu erhalten (irgendwie anstatt img=images\img1.png img=https://beispiel.de/ )
falls jemand weis wie das möglich wäre die kritärien weshalb ich die anderen ausgeschlossen habe:
keine automatische aktualisierung,eben dateien und keine links
mit keine automatische aktualisierung ist gemeint das die die ich gefunden habe jedes jahr neu eingestellt werden müssen mir ist es halt wichtig das der adventskranz
jedes jahr jeden neuen advent eine kerze anzündet und bei wenachten dann noch irgendwas anderes passiert und vor dem ersten advent so was da steht wie "es ist noch nicht adventszeit"
1 Antwort
Ein iFrame ist ein HTML-Element, welches dir erlaubt, fremde Webseiten in deine einzubetten. Vorausgesetzt, die fremde Seite und deine Seite erlauben dies jeweils (Stichwort: CORS).
Wenn du also einen iFrame einbinden kannst, könntest du deine Adventskranzanwendung auf einem separaten Webspace hosten (der PHP o.ä. unterstützt, also halt das, was notwendig ist) und sie dann auf deiner Hauptseite einbinden.
<iframe src="url-to-your-extra-webspace"></iframe>
Den Rahmen kannst du via CSS ausblenden. Unter der Annahme, dass du keinen Zugriff auf CSS-Dateien hast, wäre da ein style-Attribut passend.
<iframe src="url-to-your-extra-webspace" style="border:0"></iframe>
(...) achso ja html kann ich einbinden (...)
Dann wäre es ebenso möglich, eigene JavaScript-Anwendungen zu nutzen.
An sich müssten nur einmal die jeweiligen Daten berechnet und dann in Vergleiche mit dem gerade aktuellen Tag gesetzt werden. Daraufhin könnte man Bilder austauschen, o.ä..
Hier wird bspw. erklärt, wie man den Wochentag ermittelt. Wenn man den 24.12. als Ankerpunkt nimmt, kann man die vorherigen Sonntage berechnen. Wie das Vergleichen funktioniert, wird hier erklärt.
Das Austauschen eines Bildes klappt so:
<img alt="Some image description" id="advent" src="some-image.jpg">
<script>
const image = document.getElementById("advent");
image.setAttribute("alt", "Some other description");
image.src = "some-other-image.jpg";
</script>
Falls du hingegen nach bereits vorimplementierten Adventskranzanwendungen suchst, kann ich nicht helfen, denn ich kenne keine. Recherchiert hast du ja offensichtlich schon selbst.
Ich sehe gerade, mein Link zur Berechnung des Wochentags war falsch.
So lassen sich jedenfalls die Adventstage berechnen:
function getChristmasDays() {
const christmasDays = [];
const today = new Date();
christmasDays[4] = new Date(today.getFullYear(), 11, 24);
let startDate = new Date(christmasDays[4].getTime());
const dayInMs = 24 * 60 * 60 * 1000;
while (startDate.getDay() != 0) {
startDate = new Date(startDate.getTime() - dayInMs);
}
christmasDays[3] = startDate;
const remainingNumberOfAdventWeeks = 3;
for (let week = 1; week <= remainingNumberOfAdventWeeks; ++week) {
christmasDays[remainingNumberOfAdventWeeks - week] = new Date(startDate.getTime() - week * 7 * dayInMs);
}
return christmasDays;
}
const christmasDays = getChristmasDays();
Dem folgt nur noch das Ermitteln der Bildquelle:
const image = document.getElementById("advent");
const today = new Date();
if (today > christmasDays[4]) {
image.setAttribute("alt", "For Christmas you have still to wait some time.");
image.src = "noChristmas.png";
}
else if (today == christmasDays[4]) {
image.setAttribute("alt", "Today is Christmas Eve.");
image.src = "christmasEve.png";
}
else if (today > christmasDays[3]) {
image.setAttribute("alt", "Fourth advent.");
image.src = "fourthAdvent.png";
}
else if (today > christmasDays[2]) {
image.setAttribute("alt", "Third advent.");
image.src = "thirdAdvent.png";
}
else if (today > christmasDays[1]) {
image.setAttribute("alt", "First advent.");
image.src = "firstAdvent.png";
}
else {
image.setAttribute("alt", "For Christmas you have still to wait some time.");
image.src = "noChristmas.png";
}
Das HTML ändert sich zu dem obigen Minibeispiel nicht. Anpassungen bezüglich Bildpfad und Bildbeschreibung kannst du selbst vornehmen.
Bitte beachte, dass die Bildbeschreibung (alt) eine wichtige Bedeutung für Screenreader und Crawler hat.
danke für die antwort aber ich kann das wirklich nicht das mit einer anderen website klappt nicht das mit dem bild nach tag wechseln könnte klappen aber ich kann das denke ich nicht aber wen du hierauf antwortest köntest du wenn ich dir links zu den bildern schicken würde mir daraus einen code "basteln"
sry aber ich bin dafür zu blöd 😅