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

Autor:

Du findest mich auch auf Twitter und Facebook!

Ein Kommentar

  1. […] public links >> inhaltsstoffe Imagemap Alternative CSS Liste mit Background Image Saved by mossko on Wed 10-12-2008 Wein-Inhaltsstoffe könnten vor Demenz schützen – Wein ist gut […]

Schreibe einen Kommentar zu Recent Links Tagged With "inhaltsstoffe" - JabberTags Antworten abbrechen

Pflichtfelder sind mit * markiert.


Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.