Image-Highlight (Spotlight) Generator

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Image-Highlight (Spotlight) Generator

Ungelesener Beitrag von Werner-Zenk.de »

Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Image-Highlight (Spotlight) Generator

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

das sieht toll aus - großartig :tu:

Vielen Dank für den Hinweis, das kann man sicher mal gut gebrauchen.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Image-Highlight (Spotlight) Generator

Ungelesener Beitrag von Werner-Zenk.de »

Für mich ist das immer eine Gelegenheit damit JavaScript besser zu lernen. Indem ich da neue Anweisungen verwende, zum Beispiel kann über JavaScript eine CSS-Klasse erstellt werden und das dann an einem Element dargestellt werden, dazu gibt es verschiedene Methoden:

Code: Alles auswählen

// Erstellen eines Elements
const style = document.createElement('style');

// CSS-Stile hinzufügen
style.innerHTML = `
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`;

// An dem DOM anhängen
document.head.appendChild(style);
Eigentlich ganz einfach oder, kompliziert wird das Ganze, wenn damit in einem Generator die Werte der CSS-Anweisungen individuell angepasst werden sollen:

Code: Alles auswählen

 // Erstellen eines Elements
 const style = document.createElement('style');

 // CSS-Stile hinzufügen
 style.innerHTML =`
     #demo {
         background: ${typ}(${hp}, rgba(${farbe},0) 0%, rgba(${farbe},0) ${prozent}%, rgba(${farbe},0.65) 100%), url("${bild}") no-repeat center center scroll;
     }
 `;

 // An dem DOM anhängen
 document.getElementById("demo").appendChild(style);
Das komplette Script ist aber nichts Besonderes, https://werner-zenk.de/tools/scripts/image-highlight.js und sollte anpassbar bleiben, wenn ich in Zukunft das Script verändern möchte oder Teile des Codes woanders verwende.

Früher hätte ich das mit PHP und einem Formular gemacht und bei jeder Änderung der Werte, die Daten per Ajax an PHP gesendet damit dieser die CSS-Anweisung erstellt. Aber in dem ich nur JavaScript verwende, geht das nun viel einfacher und PHP wird nur für die Darstellung der Seite verwendet :)
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 19 Gäste