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

Image maps. Note that image maps can cause significant accessibility problems (and can be work to maintain), so you should restrict their use to places where they are really appropriate, such as (surprise) a This is a tutorial (including ) how to make a responsive image with clickable areas (i.e. responsive interactive images) for in WordPress. MIME(Multipurpose Internet Mail Extensions) Creating Image Maps - elated.com Note that all coordinate values are relative to the top left corner of the . In other words, the top left corner always has coordinates (0,0). Tags: creating, image, maps, It details processes or procedures of some aspect(s) of Wikipedia's norms and practices. It is not one of Wikipedia's policies or guidelines, as it has not been thoroughly vetted by the community.

Autor:

Du findest mich auch auf Twitter und Facebook!

Ein Kommentar

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

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


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