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