|
Verständnissproblem mit CSS
Hallo!
Ich möchte den Hintergrund einer Webseite dynamisch anzeigen. D.h. innerhalb eines Bildes sollen verschiedene Zustände angezeigt werden. Der Hintergrund soll allerdings nicht jedes Mal neu geladen werden (Sehr begrenzte Bandbreite!!!). Meine Informationen beziehe ich von einem CGI-Programm. Ist sowas überhaupt mit CSS möglich und wenn ja, wie? Viele Grüße... |
Re: Verständnissproblem mit CSS
Hallo Stefan,
natürlich kannst du ein Hintergrundbild über CSS einstellen:
Code:
Aber um den Wechsel anzustoßen brauchst du ein auslösendes Ereignis und um den Wechsel durchzuführen greifst du auf Dynamic HTML zurück - JScript und DOM sind die Stichworte. Soviel zur Rolle von CSS in diesem Spiel.
<body style="background-image: url(stefan.jpg)">
Grüße vom marabu |
Re: Verständnissproblem mit CSS
Hi!
Es ist also möglich Teile in einem statischen Hintergrundbild auszutauschen?! Kennst du vielleicht ein Tutorial zu Dynamic-Html, oder kannst du kurz beschreiben, wie sowas ablaufen könnte? Greetz |
Re: Verständnissproblem mit CSS
Zitat:
 http://de.selfhtml.org/dhtml/index.htm :wink: |
Re: Verständnissproblem mit CSS
Du kannst zur Laufzeit document.body.style.backgroundImage ändern, das funktioniert mit IE und FF. Nimm das folgende Beispiel und ersetze wp1.jpg und wp2.jpg durch zwei Grafiken von dir.
Code:
<html>
<head> </head> <body style="background-image:url(wp1.jpg);"> <script type="text/javascript"> <!-- function Clicker() { if (document.body.style.backgroundImage == "url(wp1.jpg)") document.body.style.backgroundImage = "url(wp2.jpg)"; else document.body.style.backgroundImage = "url(wp1.jpg)"; } //--> </script> [url="javascript:Clicker()"]Click me![/url]</p> </body> </html> |
Re: Verständnissproblem mit CSS
Wegen dem Neuladen: Sobald ein Bild bereits geladen wurde wird es im Normalfall im Cache des Browsers gespeichert. D.h. also beim nochmaligem Laden wird das nur noch aus dem Cache geholt. Wenn du nur ein oder zwei verschiedene Hintergrundbilder/zustände haben willst wird dir das reichen.
Wenn du mehrere feste Hintergrundzustände haben willst hilft es dir vielleicht wenn du nur Teile des Hintergrundbildes austauschst. Dazu kannst ebenso wie dem Body-Tag auch Tabellenzellen Hintergrundbilder einbinden. Bsp.:
Code:
Ich hoffe du weißt in etwa wie ich das meine ;) Allerdings hast du dabei ein Problem: Die Tablelle befindet sich nicht im Hintergrund. Entweder du baust also Inhalte deiner Seite mit in diese Zellen ein oder zweite Möglichkeit:
<table style="background-image:url(hauptbild.jpg);">
... <tr> <td style="width: ...; height: ...; background-image:url(Bildteil1.jpg);"></td> </tr> ... </table> Du kannst mit den Attributen position:absolute; left: ...; top: ...; die eigentlichen Inhalte über die Hintergrundtabelle legen. Dazu vielleicht einfach eine große Tabelle erstellen die sich über die gesamte Seite erstreckt und die du mit position usw. über den Hintergrund legst und darein kannst du sämtliche deine Inhalte ablegen. Allerdings würde ich es so gestalten, dass für Anwender ohne eingeschaltetem JavaScript die Seite trotzdem ordentlich angezeigt wird (d.h. der dynamische Hintergrund darf nicht mehr dynamisch sein und die Tabelle mit dem Inhalt muss fest liegen). Was noch dazu beachtet werden muss: Diese Hintergrundbilder, egal wie groß, müssen irgendwann mal geladen werden. D.h. wenn das Hintergrundbild noch nicht geladen ist und schon durch JavaScript getauscht wird kann es entweder hängen oder weiße unschöne Flecke ergeben. Deswegen evtl. vielleicht versuchen die Bilder beim ersten Aufruf (noch besser davor :? ) irgendwo versteckt laden. Z.b. als Hintergrund in einer Tabelle oder eines Frames die/das nicht zu sehen wäre (width und height auf 0). Wenn du das Hintergrundbild vielleicht verwischen willst, Lichteffekte einbauen willst etc. helfen dir evtl. auch die CSS-HintergrundbildFilter von Microsoft. Die werden aber leider nur vom Internet Explorer unterstützt. Allerdings kann man damit viele tolle Sachen mit den Hintergrundbildern anstellen :)Z.B. dem Hintergrund mit verschiedenen Farben erleuchten lassen. Dazu einfach eine Hintergrundfarbe festlegen mit der das Bild verschmelzen soll und dadrauf das Bild legen. Oder einen dunkelblauen Hintergrund mit leuchtendem Riesen"punkt" in der Mitte erzeugen lassen:
Code:
Sollte mehr Interesse für die Filter bestehen schreib mir mal ne PN und ich schick dir mal nen Beispiel zu dass ich vor längerem mal für jemanden erstellt hab.
...
<body style="margin:1px; filter:Alpha(opacity=50, finishopacity=100, style=2); background-color:#000066;"> </body> ... Gruß, Robert |
| Alle Zeitangaben in WEZ +1. Es ist jetzt 06:21 Uhr. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz