go41

Imagemap Alternative CSS Liste mit Background Image

von Joern am 15. Jul. 2008 | 1 Kommentar

Auf einer Seite die ich betreue habe ich im Footer ein Background Image mit Stichworten, welche ich klickbar machen und mit Beiträgen verlinken will.

Eine Imagemap über ein mehrteiliges Hintergrundbild zu legen war mir denn doch zu schwierig, deshalb habe ich eine Liste der Links erstellt und in den Seiten Footer eingefügt.

Die Liste sieht so aus:


<div class="footimglinks">
<ul id="footimg">
<li id="l1"><a href="http://www.vinobeauty.de/inhaltsstoffe/leberwurstbaum-kigelia-africana/" title="Leberwurstbaum Extrakt (Kigelia africana)" >Leberwurstbaum Extrakt (Kigelia africana)</a></li>
<li id="l2"><a href="http://www.vinobeauty.de/inhaltsstoffe/soja-protein/" title="Soja Protein - Soja Isoflavone Extrakt" >Soja Protein - Soja Isoflavone Extrakt</a></li>
<li id="l3"><a href="http://www.vinobeauty.de/inhaltsstoffe/traubenkernoel-vitis-vinifera/" title="Traubenkernöl (Vitis vinifera)" >Traubenkernöl (Vitis vinifera)</a></li>
<li id="l4"><a href="http://www.vinobeauty.de/inhaltsstoffe/opc-oligomere-procyanidinetraubenkern-extrakt/" title="OPC (Oligomere Procyanidine / Traubenkern Extrakt)" >OPC (Oligomere Procyanidine / Traubenkern Extrakt)</a></li>
<li id="l5"><a href="http://www.vinobeauty.de/inhaltsstoffe/resveratrol/" title="Resveratrol (Traubenschalenextrakt)" >Resveratrol (Traubenschalenextrakt)</a></li>
<li id="l6"><a href="http://www.vinobeauty.de/info/" title="Panthenol - Info zur Hautpflege" >Panthenol - Info zur Hautpflege</a></li>
<li id="l7"><a href="http://www.vinobeauty.de/inhaltsstoffe/parakresse-extrakt-acmella-oleracea/" title="Parakresse Extrakt (Acmella Oleracea)" >Parakresse Extrakt (Acmella Oleracea)</a></li>
<li id="l8"><a href="http://www.vinobeauty.de/inhaltsstoffe/hyaluronsaeure-sodium-hyaluronate/" title="Hyaluronsäure (Sodium Hyaluronate)" >Hyaluronsäure (Sodium Hyaluronate)</a></li>
<li id="l9"><a href="http://www.vinobeauty.de/inhaltsstoffe/aloe-vera-extrakt-aloe-barbadensis/" title="Aloe Vera Extrakt (Aloe Barbadensis)" >Aloe Vera Extrakt (Aloe Barbadensis)</a></li>
<li id="l10"><a href="http://www.vinobeauty.de/inhaltsstoffe/parakresse-extrakt-acmella-oleracea/" title="Parakresse Extrakt in Nanopearls - anhaltender Effekt" >Parakresse Extrakt in Nanopearls - anhaltender Effekt</a></li>
<li id="l11"><a href="http://www.vinobeauty.de/inhaltsstoffe/flammengras-imperata-cylindrica/" title="Flammengras (Imperata cylindrica)" >Flammengras (Imperata cylindrica)</a></li>
<li id="l12"><a href="http://www.vinobeauty.de/hauteigene-wirkstoffe/hautverwandte-wirkstoffe/" title="CoEnzym Q10" >CoEnzym Q10</a></li>
<li id="l13"><a href="http://www.vinobeauty.de/spezielle-pflegeserie/vinolift-ampullenkur-mit-argireline/" title="Argireline Ampullenkur" >Argireline Ampullenkur</a></li>
</ul>
</div>


Wenn man das so einfügt ohne CSS styling erscheint natürlich einfach die Liste dort wo sie eingebaut wurde.

Nun zu dem etwas schwierigeren Part, das Styling:

Um die Liste erstmal wieder unsichtbar zu machen, wird sie mit einem negativen text-indent (-9999px) aus dem Bild geschoben.
Um das mit position relativ festgelegt ul Element habe ich noch eine DIV class gelegt, welche absolut positioniert ist und eine Höhe von 1px hat. Safari und Firefox haben auch ohne dieses DIV gut funktioniert, der IE Internet Explorer lag ohne den DIV-Rahmen irgendwie daneben.
Auch nur wegen dem IE habe ich eine font-size:1% eingestellt, sonst klafft da im CSS Design eine leere Lücke.

Nun habe ich in der style.css die Einträge für die DIV, ul und li ID’s eingetragen.
Positionen für die Listeneinträge wurden erstmal alle mit #nrX a top:-20px;left:200px; eingetragen.

Nachdem ich die style css dann auf dem Server hatte, habe ich den Firebug Plugin für Firefox benutzt, um direkt am Monitor einen Listeneintrag nach dem anderen dort hin zu schieben, wo er sein soll. Also letzt endlich die Position jedes einzelnen li a Elements in der CSS Datei vervollständigt. Viel probieren hilft viel…

Die Einträge in der CSS sehen nun so aus:

.footimglinks{position:absolute;height:1px; /* IE */}
#footimg{position:relative;list-style:none;width:880px;height:1px;margin:0;font-size:1%; /* fontsize IE */}
#footimg li a{position:absolute;text-indent:-9999px;display:block;text-decoration:none;width:200px;height:30px;background:none}
#footimg li a:hover {background:white;
opacity:0.5; /* CSS3 - FF, Opera und Safari */
-moz-opacity:0.5; /* für ältere Mozilla Versionen */
-khtml-opacity:0.5; /* für ältere Safari und Konqueror Versionen */
filter:alpha(opacity=50); /* IE */ }
#l1 a{top:-35px;left:150px;}
#l2 a{top:-5px;left:150px;}
#l3 a{top:-145px;left:350px;}
#l4 a{top:-105px;left:300px;}
#l5 a{top:-75px;left:300px;}
#l6 a{top:-5px;left:350px;}
#l7 a{top:-110px;left:500px;}
#l8 a{top:-60px;left:500px;}
#l9 a{top:-10px;left:530px;}
#l10 a{top:-135px;left:700px;}
#l11 a{top:-105px;left:700px;}
#l12 a{top:-70px;left:700px;}
#l13 a{top:-30px;left:700px;}

Wer will kann sich das Ergebnis hier im unteren Teil der Seite anschauen: Vinobeauty

4.7.1.1 Requirements for providing text to act as an alternative for images. Text alternatives, are a primary way of making visual information accessible This document describes techniques for authoring accessible Hypertext Markup (HTML) content (refer to HTML 4.01 [HTML4]). This document is Multiple Sub Buttons in HTML. Quite a number of folks seem to mistakenly believe that a form can have only one "sub button". This document Help:HTML in wikitext - Wikipedia The MediaWiki software, which drives Wikipedia, allows the use of a subset of HTML5 elements, or tags and their attributes, for presentation formatting Tags: help, html, wikitext, maps. Note that maps can cause significant accessibility problems (and can be work to maintain), so you should restrict their use to

Autor:

Du findest mich auch auf Google+, Twitter und Facebook!

Ein Kommentar

  1. Pingback: Recent Links Tagged With "inhaltsstoffe" - JabberTags

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.