24.10.2010
Image-Maps mit CSS
Mit Image-Maps kann man Grafiken interaktiv gestalten. Man spricht auch von "verweis-sensitiven Grafiken", bei denen für bestimmte Grafikteile ein Hover-Effekt eingebaut wird. Die Standardanleitung für Image-Maps findet ihr bei SELFHTML. Hier soll gezeigt werden, wie Image-Maps auch mit reinen CSS-Formatierungen funktionieren.
Zu diesem Zweck verwende ich die mit Ulead Photo Impact X3
Geeignete Grafiken könnten ebenso Gruppenfotos sein, die zu den einzelnen Websites der dargestellten Personen verlinken, Landkarten, Homepage-Startseiten, oder was euch immer dazu einfällt.
Nachfolgend wollen wir nun erreichen, dass die einzelnen Schriftzüge oder Symbole dieser Grafik zu den sie symbolisierenden Websites verlinkt werden. Im Ergebnis soll das dann so funktionieren:
Starten wir also, indem wir die zur Anwendung kommende Grafik als ganz normales Image in einen Div einbinden und diesem noch einen ID zwecks späterer Formatierung zuweisen.
Unterhalb der Grafik fügen wir eine Listen-Navigation ein. Den einzelnen Listeneinträgen weisen wir je eine Klasse entsprechend der zu öffnenden Website zu. Danach schließen wir den Div. Daraus ergibt sich für unsere Demo folgender HTML-Quelltext:
<div id="map">
<img src="map.jpg" width="550" height="300" border="0" alt="Imagemap">
<ul>
<li class="css"><a href="http://www.ohne-css.gehts-gar.net">CSS-Fundgrube</a></li>
<li class="pi"><a href="http://www.ohne-pi.gehts-gar.net">PI-Kurs</a></li>
<li class="rebecca"><a href="http://www.rebecca-senck.de">Rebecca</a></li>
<li class="garnele"><a href="http://www.ohne-garnele.gehts-gar.net">Garnele</a></li>
<li class="handball"><a href="http://www.ohne-handballfotos.gehts-gar.net">Handballfotos</a></li>
<li class="nowayout"><a href="http://www.nowayout-pfalz.de">Nowayout</a></li>
</ul>
</div>
Das bis dahin noch unformatierte Zwischenergebnis könnt ihr in Demo 1 sehen.
Sieht in der Tat noch nicht so prickelnd aus, denn die einzelnen Links sollten ja bei den Grafik-Schriftzügen und Symbolen erscheinen und nicht als eigenständige Navigation darunter.
Genau dazu bedarf es nun einiger CSS-Angaben:
Damit wir später die Links positionsmäßig den Schriftzügen und Symbolen zuweisen können, müssen wir die Grafik relativ positionieren. So erhalten wir einen Bezugspunk und können später die einzelnen Links hierzu positionieren.
Im zweiten Schritt sorgen wir dafür, dass unsere Navi browsereinheitlich keine Abstände ausweist und keine Listenpunkte enthält.
Daraus ergeben sich die beiden folgenden CSS-Angaben:
#map {
position: relative;
}
#map ul {
margin: 0;
padding: 0;
list-style: none;
}
Mit Ausnahme der weggefallenen Aufzählungspunkte weicht unsere Demo 2 in keinster Weise von Demo 1 ab.
Als Nächstes lassen wir die einzelnen Linkbezeichnungen verschwinden, indem wir ihnen einen hohen negativen text-indent-Wert zuweisen. Damit sind sie zwar immer noch vorhanden (und bleiben somit auch für Screenreader lesbar), geraten jedoch außerhalb des Viewports und sind damit nicht sichtbar.
Die Links selbst positionieren wir absolut. Damit befinden sie sich - obwohl noch unsichtbar - an der oberen linken Ecke der Grafik.
#map a {
position: absolute;
text-indent: -1000em;
}
Voilà: Unsere Navigation unterhalb des Bildes ist in Demo 3 verschwunden.
Wenden wir uns nun den einzelnen Listeneinträgen zu, denen wir vorsorglich unterschiedliche Klassen zugewiesen haben.
Diese Klassen dienen dazu, die Links auf den Grafik-Schriftzügen und Symbolen zu positionieren.
Dazu müsst ihr nun entweder etwas experimentieren oder zur Erleichterung das Maßwerkzeug des Firefox-Webdevelopers verwenden. Damit könnt ihr die erforderlichen top- und left-Werte sowie die erforderlichen Linkhöhen und -breiten besser bestimmen.
Nachdem eine absolute Positionierung bereits erfolgt ist, müssen jetzt noch die erforderlichen Abstände von oben bzw. links zur oberen linken Grafikecke ermittelt und bei den Klassen eingetragen werden. Außerdem noch die erforderliche Breite und Höhe für den Link.
Für die Demo-Imagemap ergeben sich somit folgende Werte für die einzelnen Klassen:
#map .css a {
top: 33px;
left: 20px;
width: 255px;
height: 40px;
}
#map .pi a {
top: 30px;
left: 340px;
width: 190px;
height: 100px;
}
#map .rebecca a {
top: 110px;
left: 25px;
width: 203px;
height: 100px;
}
#map .garnele a {
top: 75px;
left: 250px;
width: 120px;
height: 120px;
}
#map .handball a {
top: 160px;
left: 410px;
width: 95px;
height: 90px;
}
#map .nowayout a {
top: 220px;
left: 80px;
width: 280px;
height: 60px;
}
Zum Schluss soll man beim "Drüberfahren mit der Maus" optisch einen Hover-Effekt erkennen. Dies kann man mit unterschiedlichen Formatierungen erreichen, z.B., indem wir beim Hovern einen Rand um unser Linksymbol erscheinen lassen. Einheitlich für alle Links hinterlegen wir:
#map a:hover {
border: 3px solid #a80000;
}
Denkbar wäre auch, anstelle des allgemein definierten Rahmens je Klasse eine Hintergrundgrafik einzubinden, etwa so:
#map .css a:hover {
background-image: url(hovergrafik.jpg);
width: 255px;
height: 40px;
}
Damit ist unsere "verweis-sensitive Grafik" schon fast perfekt, wie aus Demo 4 erkennbar.
"Fast" einmal wieder deshalb, weil uns der Internet Explorer einen Strich durch die Rechnung macht. Er will mit unserem Code partout keinen Hover-Rand erscheinen lassen und verweigert ebenso die Link-Funktionsfähigkeit.
Rein experimentell kann dem Abhilfe geleistet werden, indem man #map a eine Hintergrundfarbe zuweist. Doch dadurch wird unser Symbol gleichzeitig verdeckt, was nicht gewollt ist. Die Hintergrundfarbe "transparent" funktioniert im Internet Explorer ebenfalls nicht.
Somit bedienen wir uns eines kleinen Tricks: Dem Link wird anstelle der transparenten Hintergrundfarbe ein transparentes GIF als Hintergrundgrafik zugewiesen. Dazu reicht eine kleine transparente Grafik von 10px auf 10px Größe. Ihr könnt euch diese kopieren (klickt mit der rechten Maustaste auf die Mitte des blauen Rahmens, denn die Grafik ist ja transparent und deshalb unsichtbar, danach Grafik speichern unter...):
Den CSS-Code ergänzen wir an folgender Stelle mit:
#map a {
position: absolute;
text-indent: -1000em;
background: url(bg.gif);
}
Damit funktioniert das Image-Map auch im Internet Explorer, wie Demo 5 zeigt.
Als hätte ich's geahnt, seid ihr mit unserem neusten Werk immer noch nicht ganz zufrieden: Hat man einmal auf einen Link geklickt, erscheint anschließend ein gepunkteter Rahmen, den manche als störend empfinden mögen.
Der Firefox gibt sich mit dieser Zusatzangabe zufrieden:
#map a {
position: absolute;
text-indent: -1000em;
background: url(bg.gif);
outline: none;
}
Den Internet Explorer juckt dies indes überhaupt nicht. Er bedarf einmal mehr einer kleinen Sonderbehandlung in Form eines Javascripts. Fügt deshalb zum Schluss noch folgenden Code innerhalb des Headbereichs (z.B. vor dem Schließen von </head>) ein:
<script type="text/javascript">
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("this.blur()");
}
}
onload=BlurLinks;
</script>
Damit sollten nun aber auch alle anspruchsvollen Wünsche erfüllt sein.
Seht euch also das Endergebnis und dessen Funktionsweise in Demo 6 an.
Eine solches, CSS-basiertes Image-Map ist also vielfältig einsetzbar. Es kann z.B. eine langweilige Navigation ersetzen und bringt so etwas Abwechslung und Pep in eure Websites.
Die Anregung für diese Anleitung stammt aus dem Buch CSS Mastery. Webdesign für Fortgeschrittene