Byteshift: Webdesign aus Berlin


was| wer| wo| details| english

Die Nacht der Image Map
Autor: Stuart Robertson
Alistapart Ausgabe: 166

In alter Zeit, bevor wir uns viel Gedanken um Web Standards oder Zugänglichkeit für Behinderte machten, verwendeten Webdesigner Image Maps, um schnell eine einzelne Grafik in Regionen zu unterteilen und diese Regionen mit separaten URLs zu verlinken. Traditionelle Image Maps vertragen sich allerdings nicht gut mit Nur-Text Browsern und sie sind nicht so effizient oder vielseitig wie viele neuere Techniken. Man kann sie noch auf älteren Webseiten oder vielleicht auf komplexen Karten finden, aber die meisten Webdesigner würden sie wohl als eine alte Technik einschätzen - eine tote.

Während der Mitarbeit an einer Horror Fiction Website beschloß ich frühzeitig, die Site bestmöglich mit standardbasiertem XHTML und CSS zu schreiben. Als der andere Designer mir sein Konzept für die Site schickte, begann ich zu verzweifeln. Er wollte, daß die Seite wie ein altes vergilbtes Buch aussehe, mit rauhen Kanten und verschlissenen Texturen. Die Menüpunkte waren über die Seite verstreut. Wie könnte ich wohl ein wohlstrukturiertes Dokument in etwas verwandeln, daß so organisch aussah?

Ich dachte an Image Maps.

Sie waren furchtbar überholt, aber ein Image Map würde es so viel einfacher machen als die Hintergrundgrafik in dutzende Teile zu hacken und sie mit Hilfe von CSS wieder zusammenzuflicken. Es war vielleicht verrückt daran zu denken, sie wieder einzusetzen, aber die alte Tour schien die Lösung zu sein. Ich beschloß ins Laboratorium zurück zu gehen, um zu sehen, ob ich mit Hilfe der modernen CSS-Wissenschaft diese Webdesign-Technik wieder zum Leben erwecken könnte.

Die Fakten, so wie wir sie kennen

Um unsere Image Maps herzustellen, werden wir CSS einsetzen um unsichtbare Links zu schaffen und diese über dem Hintergrundbild zu platzieren, wo immer das notwendig ist.

Zuerst schaffen wir einen äußeren div dem das Hintergrundbild zugewiesen wird. Unsere Links kommen in einen verschachtelten div, um unseren Quelltext übersichtlich zu gestalten - so wird es auch möglich, den Links als Gruppen CSS-Stile zuzuweisen. Der verschachtelte div kann auch beim Einsatz eines Style Sheet Switcher praktisch sein, um per CSS alternierende Menü-Effekte zu erzielen.

<div id="book">
  <div id="menu">
    ...
  </div>
</div>

Die einzelnen Links können jetzt in unseren verschachtelten div gesetzt werden. Jedem Link eine eigene id zuzuweisen erlaubt uns, sie voneinander unabhängig auf der Seite zu positionieren. Die einzelnen ids sind auch Anker, so das die User die Links direkt auswählen können, unabhängig davon, wo auf der Seite sie sich befinden oder ob sie diese anklicken können.

Um den Text innerhalb der Links unsichtbar zu machen, müssen wir einen weiteren verschachtelten Tag zufügen. Ich bevorzuge semantisch bedeutungslose <i> Tags, da sie auch ohne Style Sheet optisch erkennbar sind, so kann man einfacher mit ihnen arbeiten. Sie sind auch sehr kurz, dies macht den Quelltext schlanker. Sie können natürlich auch <span>, <em>, oder einen anderen Tag verwenden, wenn Sie wollen. {Zeilenumbrüche sind als » markiert. – d. Hrsg.}

<div id="book"> 
  <div id="menu"> 
    <a href="index.html" id="home"><i>Home</i></a>
    <a href="preface.html" id="preface"><i>Preface</i></a>
    <a href="stories.html" id="stories"><i>Stories</i></a>
    <a href="galleries.html" id="gallery"><i>Galleries"</i></a>
    <a href="forums.html" id="forum"><i>Forum</i></a>
    <a href="mementos.html" id="mementos"><i>Mementos"</i></a>
    <a href="credits.html" id="credits"><i>Credits</i></a>
    <a href="indicia.html" id="indicia"><i>Indicia</i></a>
  </div>
</div>

Das ist all das XHTML, das wir brauchen. Sie können das Ergebnis in Beispiel 1 ansehen. Wir können jetzt weitergehen und den Image Map Effekt durch unser Style Sheet umzusetzen.

Alles nach (Master) Plan

Weisen Sie in Ihrem Style Sheet dem document body eine Hintergrundfarbe zu und setzen Sie margin und padding auf 0. Dies wird bei unseren Berechnungen hilfreich sein, wenn wir absolute Positionierung einsetzen.

body {
  background-color: #000;
  margin: 0;
  padding: 0;
  }

Der Hintergrund für unsere Image Map wird dem äußeren div zugewiesen. Sie sollten eine entsprechende Höhe und Breite zuweisen, um sicherzustellen, daß sie vollständig angezeigt wird.

#book {
  background-image: url(/d/imagemap/images/bookpages.jpg);
  height: 595px;
  width: 750px;
  }

Alle Stile, die die Mehrheit der Links betreffen, können zusammen definiert werden. Spezifischere CSS-Regeln können eingesetzt werden, um die Attribute einzelner Links nach Bedarf zu verändern. Benutzen Sie absolute Positionierung und denken Sie an einheitliche height, width und top Position für alle Links. Es wird jetzt auch Zeit, alle Unterstriche zu entfernen.

#menu a {
  position: absolute;
  height: 38px;
  width: 88px;
  top: 31px; 
  text-decoration: none;
  }

Um den Text innerhalb der Links zu verbergen, ohne sie dadurch nicht mehr anklickbar zu machen, setzen wir einen CSS-Selektor ein, dieser identifiziert den italisierten Text in den Links innerhalb unseres geschachtelen div und setzen seine visibility auf hidden. Es ist wichtig, sinnvollen Linktext einzusetzen, auch wenn er für die Mehrheit der User unsichtbar bleibt. Dies stellt sicher, daß die Site für Browser, die kein CSS unterstützen und User, die die Site mit einem benutzerdefinierten Style Sheet aufrufen, zugänglich bleibt.

#menu a i { visibility: hidden; }

Sobald die allgemeinen CSS-Werte gesetzt sind, können wir jedes Link einzeln positionieren. Um effizienter zu arbeiten, können Links, die ein Attribut gemein haben, wie z.B. left oder top, zusammen definiert werden.

a#credits, a#indicia  { top: 531px; }
a#home                { left: 101px; }
a#preface             { left: 221px; }
a#stories             { left: 311px; }
a#gallery             { left: 431px; }
a#forum               { left: 526px; width: 61px; }
a#mementos            { left: 591px; width: 98px; }
a#credits             { left: 431px; }
a#indicia             { left: 591px; }

Wenn die Menü-Links nun in das XHTML unseres Dokuments eingesetzt werden, werden sie unabhängig voneinander über dem Hintergrund schweben. Wir sind fertig, wenn wir sie über den Bereichen der Grafik positionieren, die wie Links aussehen. Das richtige Platzieren Ihrer Links wird normalerweise sorgfältige Berechnung oder ein bißchen Trial and Error erfordern.

CSS Image Maps können über das :hover Pseudo-Element den Rollover Status eines jeden Links unterschiedliche Styles zuweisen. Dies macht es möglich, neue Grafiken über dem Hintergrund erscheinen zu lassen, wenn der User den Mauszeiger über einem der unsichtbaren Link-Bereiche bewegt.

a#preface:hover   { background-image: url(/d/imagemap/images/prefaceglow.jpg); }
a#stories:hover   { background-image: url(/d/imagemap/images/storiesglow.jpg); }
a#gallery:hover   { background-image: url(/d/imagemap/images/galleryglow.jpg); }
a#forum:hover     { background-image: url(/d/imagemap/images/forumglow.jpg); }
a#mementos:hover  { background-image: url(/d/imagemap/images/mementosglow.jpg); }
a#credits:hover   { background-image: url(/d/imagemap/images/creditsglow.jpg); }
a#indicia:hover   { background-image: url(/d/imagemap/images/indiciaglow.jpg); }

Ein Fehler des Internet Explorer hindert die Rollover Grafiken daran, wieder - wie erwartet - unsichtbar zu werden. Dem :hover Zustand aller CSS Image Map Links border: none zuzuweisen, schafft Abhilfe.

a#home:hover,
a#preface:hover,
a#stories:hover,
a#gallery:hover,
a#forum:hover,
a#mementos:hover,
a#credits:hover,
a#indicia:hover { border: none; }

Sie könne des Endresultat unserer CSS Image Map in Beispiel 2 sehen.

Post mortem

Der Einsatz großer Hintergrund-Grafiken ist nicht bandbreitenfreundlich, aber es kann ansprechendes Design ermöglichen und Besuchern mit großer Bandbreite einen umfassenderen optischen Zugang bieten. Da CSS Image Maps standard-basiertes XHTML verwenden, können wir einen Style Sheet Switcher verwenden, um eine alternative Version der Site mit niedriger Bandbreite anzubieten.

Besonderen Dank geht an Nate Piekos uns Shane Clark für ihre Arbeit an Dead Ends, Massachusetts, wo die Image Map und andere dunkle Dinge vom Grabe wiederauferstanden sind.


Stuart Robertson ist ein Webdesigner, er lebt in Ontario, Kanada.

Originaladresse: www.alistapart.com/articles/imagemap/
Alistapart Diskussionsforum (englisch): www.alistapart.com/discuss/imagemap/

Translated with the permission of A List Apart Magazine and the author[s].

Wichtige Links zum Thema Web Design und Typographie

Valid XHTML 1.0! Valid CSS!