Image-Highlight Generator - https://werner-zenk.de/tools/image-high ... erator.php
Image-Highlight (Spotlight) Generator
- Werner-Zenk.de
- Mitglied (Level 10)
- Beiträge: 755
- Registriert: Di 8. Dez 2020, 19:42
- Wohnort: Bamberg
- Kontaktdaten:
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Image-Highlight (Spotlight) Generator
Moin Werner,
das sieht toll aus - großartig
Vielen Dank für den Hinweis, das kann man sicher mal gut gebrauchen.
das sieht toll aus - großartig
Vielen Dank für den Hinweis, das kann man sicher mal gut gebrauchen.
- Werner-Zenk.de
- Mitglied (Level 10)
- Beiträge: 755
- Registriert: Di 8. Dez 2020, 19:42
- Wohnort: Bamberg
- Kontaktdaten:
Re: Image-Highlight (Spotlight) Generator
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:
Eigentlich ganz einfach oder, kompliziert wird das Ganze, wenn damit in einem Generator die Werte der CSS-Anweisungen individuell angepasst werden sollen:
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
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);
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);
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
Werner
https://werner-zenk.de
https://werner-zenk.de
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 38 Gäste