Umlauf von Bildern

Browser-Ansicht

◀   In den Rahmen links ist eine Mini-Webseite mit Bild (von Paul Gauguin, modifiziert) eingebettet.

• Die Grafik ist links ausgerichtet und wird rechts von Text umflossen.
Diese Anordnung wird mit der → CSS-Eigenschaft float:left eingestellt.
Grafik rechts ausrichten und links umfließen.


▶  Verwandtes Thema:  Ohne das CSS-Attribut float fließen die Bilder mit dem Text (→ Beispiel und einige Grundlagen zur Verwendung von HTML+Grafik)

▶  Mit Klick auf diesen Link wird das Mini-Beispiel in einem eigenen Browser-Tab geladen.

• In der Webdesign-Praxis spielt die Ausrichtung mit CSS-float eine wichtige Rolle bei der Anordnung von Elementen. Man kann nicht nur Bilder sondern auch fast beliebige andere Objekte anordnen und/oder umfließen.

HTML-Quelltext

◀   Links sehen sie den HTML-Quelltext der Mini-Webseite mit Grafik.
Diesen Text hat ihr Browser vom Webserver erhalten.

• Die Grafik ist als HTML <img>-Element eingetragen. Sie enthält ein style-Attribut mit CSS-Anweisungen zur Formatierung.

• Die CSS-Eigenschaft float:left bewirkt die linksbündige Ausrichtung der Grafik. Alle folgenden Elemente (hier: Text-Daten) umfließen die Grafik rechts im Abstand von margin-right:10px Pixeln.


• Nach dem unteren Ende der Grafik steht den folgenden Elementen wieder die volle Breite zur Verfügung.

Alternativ kann man jede Grafik mit der CSS-Eigenschaft float:right ↑ rechtsbündig ausrichten.

User-Interface mit Javascript

Die Javascript-Funktion ändert jeweils 9 Elemente dieser Webseite:
Diese Methode stellt keine Fragen, arbeitet rasch und ergibt hoffentlich eine übersichtliche Darstellung der beiden Beispiele.

Die folgende Beschreibung gehört nicht mehr zum Thema 'HTML+Grafik' und ist nur für mäßig fortgeschrittene EntwicklerInnen sinnvoll.



Zu Beginn wird je 1 Element der Text-Paare mit der → CSS-Eigenschaft display unsichtbar gemacht.

Die Javascript-Funktion kehrt die display-Eigenschaften der beiden <div>-Elemente um: Das unsichtbare Element wird angezeigt, das sichtbare verschwindet. Das lässt sich leicht programmieren und wird rasch ausgeführt.



Die Umschaltung jenes Rahmens, in welchem der HTML-Quelltext angezeigt wird, ist schwieriger. Die Datei-Namen der als Beispiel verwendeten Mini-Webseiten werden als GET-Argumente verwendet und müssen nach URI-Regeln codiert werden. Dieser Teil der Javascript-Funktion ist nur für fortgeschrittene EntwicklerInnen verständlich.