Verständnissproblem mit CSS

**Grolle**

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...

**marabu**

Hallo Stefan,

natürlich kannst du ein Hintergrundbild über CSS einstellen:

markieren

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.

Grüße vom marabu

**Grolle**

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

**S2B**

Zitat von Grolle:

Kennst du vielleicht ein Tutorial zu Dynamic-Html, oder kannst du kurz beschreiben,
wie sowas ablaufen könnte?

http://de.selfhtml.org/dhtml/index.htm

**Flocke**

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.

markieren

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>

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.:

markieren

Code:

			<table style="background-image:url(hauptbild.jpg);">

...

<tr>

<td style="width: ...; height: ...; background-image:url(Bildteil1.jpg);"></td>

</tr>

...

</table>

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:
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:

markieren

Code:

			...

<body style="margin:1px; filter:Alpha(opacity=50, finishopacity=100, style=2); background-color:#000066;">

</body>

...

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.

Gruß, Robert

Verständnissproblem mit CSS

Verständnissproblem mit CSS

Re: Verständnissproblem mit CSS

Re: Verständnissproblem mit CSS

Re: Verständnissproblem mit CSS

Re: Verständnissproblem mit CSS

Re: Verständnissproblem mit CSS

Forumregeln

Grolle Registriert seit: 5. Nov 2004 Ort: Coesfeld 1.268 Beiträge Delphi 2010 Professional	#3 Re: Verständnissproblem mit CSS 2. Dez 2005, 13:53 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
	Zitat

S2B Registriert seit: 1. Feb 2004 Ort: Aachen 1.268 Beiträge	#4 Re: Verständnissproblem mit CSS 2. Dez 2005, 14:33 Zitat von Grolle: Kennst du vielleicht ein Tutorial zu Dynamic-Html, oder kannst du kurz beschreiben, wie sowas ablaufen könnte? http://de.selfhtml.org/dhtml/index.htm Simon Praetorius Gruß S2B
	Zitat