CSS Imagemap
Nach obenImagemap als Seitennavigation - ein Unding
Die Inspiration für diesen Beitrag war für mich der Missbrauch von Imagemaps als Seitennavigation, was man bei graphischen Layouts häufig sieht, die für einige Menschen mit Behinderungen nicht besonders zugänglich sind..
Zur Zugänglichkeit von Imagemaps: Als Testobjekt dient ein Beispiel zu Imagemaps von SELFHTML. Man kann neben der Bedienung durch die Maus auch die Tastatur mit der Tabulatortaste benutzen und von Link zu Link "tabben" (springen). Auch die erlaubten Attribute "tabindex" und "accesskey" ermöglichen die gezielte Ansteuerung einzelner Verweise per Tastatur.
Doch wie sieht eine Imagemap im Textbrowser aus? Ich habe mal zum Test ein die Seite von SELFHTML in Lynx 2.7.1 aufgerufen:
Ansicht in Lynx 2.7.1
Wie man sehen kann, sind die Informationen, die die Karte bzw. Imagemap transportieren soll, nicht zugänglich. Auch die darin enthaltenen Verweise werden nicht aufgeführt. Somit ist diese Seite für die Benutzer von Textbrowsern nicht zu gebrauchen und daher allgemein nicht als Seitennavigation geeignet.
Nach obenListennavigation & CSS: eine Alternative?
In diesem Artikel soll eine Alternative zu Imagemaps aufgezeigt werden, bei der prägnates Markup zum Einsatz kommt und zugleich zugänglich (Textbrowser) ist.
Die Intension dieses Artikels soll jedoch nicht sein, Imagemaps nicht mehr zu verwenden - sie sind zur Illustration immer noch sehr sinnvoll - sondern eine CSS-Variate der Imagemap für Seitennavigationen aufzeigen.
Die einzige Einschränkung im Vergleich zur Imagemap ist, dass man nur rechteckige Verweise definieren kann, was aber in den meisten Fällen ausreicht.
Nach obenSo funktioniert es:
Grundlage für die CSS Imagemap ist eine ungeordnete Liste mit Verweisen, die über ein (Hintergrund-)Bild gelegt werden. Alle Links bekommen eine ID zugewiesen, damit man individuell Breite, Höhe, Hintergrund(-bild), Rahmen, Schriftfarbe, etc. festlegen kann. Mit Hilfe der Eigenschaft position werden die Links beliebig innerhalb eines Bereichs angeordnet.
Bei diesem Beispiel wurde einfach das Bild als Hintergrund für die ungeordnete Liste definiert, möglich wäre aber auch einfach ein Bild innerhalb eines Bereichs (div-Element).
HTML-Grundgerüst
<ul id="navi">
<li id="button1"><a href="#">Button 1</a></li>
<li id="button2"><a href="#">Button 2</a></li>
<li id="button3"><a href="#">Button 3</a></li>
<li id="button4"><a href="#">Button 4</a></li>
</ul>
Formatierungen
Zunächst wird für das ul-Element die passende Höhe und Breite für das Hintergrundbild festgelegt und relativ positioniert, damit sich die anschließenden absoluten Angaben auf die Liste beziehen und nicht auf den ganzen Bildschirm.
#navi{
position:relative;
list-style:none;
width:400px;
height:266px;
border:10px solid white;
background:url(css_imagemap.jpg);
}
Die Links innerhalb der Listenelemente werden zu Blockelementen gewandelt, damit man wirksam Höhe und Breite festlegen kann. Anschließend werden alle Links der Liste absolut positioniert. Die Textlinks, die für die Zugänglichkeit eine große Rolle spielen, werden hier durch eine große negative Texteinrückung ausgeblendet (text-indent), da sie in einer Imagemap nicht gebraucht werden. Eventuell könnte man Sie zur Information bei Hover einblenden lassen, indem man text-indent wieder auf Null stellt.
#navi li a{
position:absolute;
text-indent:-9999px;
display:block;
text-decoration:none;
width:70px;
height:70px;
background:none;
}
Nun kann man für die einzelnen Links nach Lust und Laune die Größe und Position festlegen.
#button1 a{
top:27px;
left:137px;
border:4px solid green;
}
#button2 a{
top:132px;
left:145px;
border:4px solid red;
}
#button3 a{
top:35px;
left:220px;
border:4px solid blue;
}
#button4 a{
top:90px;
left:250px;
border:4px solid yellow;
}
Nach obenBeispiel
Unser Beispiel ist durch einen Textbrowser wesentlich besser zu gebrauchen. So sieht das ganze in Lynx 2.7.1 aus:
Ansicht in Lynx 2.7.1
Im Gegensatz zu einer Imagemap sind jetzt Verweise aufgeführt, also ist die Funktionalität und Zugänglichkeit erhalten geblieben.
Nach obenMaximale Zugänglichkeit
Wie im ersten Abschnitt schon erläutert, sind die Informationen, die in Imagemaps enthalten sind, für einige Browser nicht zugänglich. Um dies zu beseitigen, könnte man einfach Alternativinhalte in Form einer Liste anbieten, die per CSS ausgeblendet wird. Empfehlenswert sind auch die Attribute tabindex, accesskey und title für das <area>-Element.
Wenn man XHTML 1.0 transitional oder eine Variante darunter verwendet, die das name-Attribute noch zulässt, ist das Markup der Imagemap auch valide.
<div id="navigation">
<img src="http://www.google.de/intl/de_de/images/logo.gif" usemap="#navigationMap" alt="Navigation" />
<map name="navigationMap" id="navigationMap">
<area shape="rect" coords="0,0,100,100" href="#1" alt="Foo" tabindex="1" accesskey="a" title="Foo" />
<area shape="rect" coords="100,0,200,100" href="#2" alt="Foo" tabindex="2" accesskey="b" title="Foo" />
<area shape="rect" coords="0,100,100,200" href="#3" alt="Foo" tabindex="3" accesskey="c" title="Foo" />
</map>
<h2>Navigation</h2>
<ul>
<li><a href="#1" title="Foo" tabindex="1" accesskey="a">Bar</a></li>
<li><a href="#2" title="Foo" tabindex="2" accesskey="b">Baz</a></li>
<li><a href="#3" title="Foo" tabindex="3" accesskey="c">Qux</a></li>
</ul>
</div>
Das CSS zum ausblenden der Alternativinhalte ist simpel.
#navigation h2, #navigation ul{
display:none;
}
Wilfried
Super! Vielen Dank und weiter so!
xxx
nur leider auch mal wieder im IE nicht zu verwenden.
xxx
nur ein schreibfehler gewesen.sry
sven
wer keine lust und zeit hat auf www.image-maps.de gibt es das schon fertig