Bilder aus Dortmund auf Ihrer eigenen Homepage

Rechts ist ein Beispiel zu sehen, wie so eine Darstellung aussehen kann. Fahren Sie mit der Maus über die kleinen Bilder und diese erscheinen anstelle des großen Bildes darunter dargestellt.

Die Einbettung dieser Darstellung auf der Webseite erfolgt mit Hilfe des HTML-Elements <iframe> (Inline-Frame), das Sie in den HTML-Code Ihrer Webseite einbetten müssen.

Dabei brauchen Sie den HTML-Farbcode für die Hintergrundfarbe, die für die Zwischenräume zwischen den Bildern verwendet wird, den Namen des groß darzustellenden Bildes und die Namen der sechs kleinen Bilder. Die Farbcodes sind sechsstellige Namen, die hexadezimal die Anteile der Farben Rot, Grün und Blau darstellen. So steht beispielsweise 000000 für schwarz, FFFFFF für weiß und FFFF00 für gelb.

Eine Übersicht der HTML-Farbcodes können Sie der Webseite http://start.farben.rehbein.net entnehmen. Dort besteht auch die Möglichkeit, zu einer Farbe andere Farben mit gleicher Helligkeit ausgeben zu lassen oder Farbcodierungen in andere Systeme umrechnen zu lassen.

Die Namen der einzelnen Photos können Sie der nachfolgenden Tabelle entnehmen. Manche der Namen enthalten einen Bindestrich (Minuszeichen), andere nicht.

Die Adresse, die als Inline-Frame anzugeben ist, setzt sich zusammen aus dem festen Bestandteil http://rehbein.net/september2005.php4?data=, danach dem sechsstelligen Farbcode und dann, durch Ausrufezeichen separiert, den sieben notwendigen Photonamen. Dabei steht der Name des Bildes, das groß dargestellt werden soll, zuerst. Der Farbcode wird ohne das vorangestellte "#", das man in HTML häufig bei Farben verwendet, angegeben.

Bei dem oben wiedergegebenen Beispiel ist die Hintergrundfarbe weiß, der Farbcode also FFFFFF. Der Name des groß darzustellenden Photos lautet dortmund-0 und die Namen der anderen sechs Bilder sind dortmund-4, dortmund-1, dortmund-2, hoerde-3, westfalenpark1 und westfalenpark2. Somit lautet die Adresse, die sich insgesamt ergibt, http://rehbein.net/september2005.php4?data=FFFFFF!dortmund-0!dortmund-4!dortmund-1!dortmund-2!hoerde-3!westfalenpark1!westfalenpark2

Aufgrund der Abmessungen der Bilder ist das <iframe>-Element sinnvollerweise 616 Pixel breit und 770 Pixel hoch. Außerdem empfiehlt es sich, die Scrollleiste auszuschalten. Da lediglich Photos dargestellt werden sollen, kann der Bereich für Textbrowser leer gelassen werden. Insgesamt ergibt sich damit ein HTML-Element wie dieses:

Ob der Einbau auf Ihrer Webseite funktioniert hat, sehen Sie natürlich nicht nur am Ergebnis im Browser, sondern auch anhand der Kontrolle des HTML-Texts. Der HTML-Validator des World-Wide-Web-Konsortiums befindet sich unter der Adresse http://validator.w3c.org

Die Funktionalität, daß man durch Überfahren mit dem Mauszeiger jeweils ein Bild vergrößert betrachten kann, funktioniert natürlich ohne aktive Inhalte (wie etwa Javascript), sondern ist vollständig in HTML und CSS realisiert. Denn aktive Inhalte widersprechen der grundsätzlichen Archtektur des Web, gemäß der Webseiten aus einer Beschreibung und Formatierung ihres Inhaltes, aber nicht aus Programmcode bestehen.

Das Ausführen aktiver Inhalte ist zudem auch ein latentes Sicherheitsrisiko und sorgt darüberhinaus für zahlreiche Ärgernisse, wie ich auf der Webseite http://www.mein-dortmund.de/javascript.html darstelle. Deshalb kann dem Web-Anwender vom Ausführen aktiver Inhalte nur abgeraten werden.

Deshalb habe ich auch hier das allgemeine Prinzip verfolgt, daß aktive Inhalte maximal Ergänzung sein dürfen, grundsätzliche Funktionen von Webseiten aber ohne Programmcode zugänglich sein müssen.