Geile Imagemap Navigation

Hey Leute, heute möchte ich euch mal eine richtig coole Möglichkeit zeigen, Navigationen für eure Websites zu erstellen. Wir nutzen dafür Imagemaps. Einige von euch werden davon noch nie etwas gehört haben, was sehr schade ist, denn Imagemaps sind wirklich geil! Ich muss euch allerdings warnen, wenn ihr hier eine vollständige Anleitung zu Imagemaps erwartet. Davon gibts schon genug, bitte sucht euch eine raus. Das hier ist nur eine Anregung.

Imagemap Navigation

Alles was wir brauchen ist ein wenig HTML, CSS und JavaScript in Form von JQuery:

HTML:

<div id="navigation">
 <img width="420" height="45" alt="" usemap="#hover" src="imagemap.png">
  <map name="hover">
   <area shape="poly" coords="8,21,10,43,109,43,104,11,9,20," href="#link1" alt="link1" title="link1" id="link1" />
   <area shape="poly" coords="82,6,84,16,100,11,107,42,184,46,182,8,81,5," href="#link2" alt="link2" title="link2"  id="link2" />
   <area shape="poly" coords="181,42,271,43,268,11,179,18,186,44," href="#link3" alt="link3" title="link3" id="link3" />
   <area shape="poly" coords="272,41,348,42,350,9,253,3,256,12,266,16,278,41," href="#link4" alt="4" title="link4" id="link4" />
  </map>
</div>

CSS:

#navigation {
 background: url("navigation.png") no-repeat scroll 0 0 transparent;
 height: 45px;
}


Die Grundvorraussetzungen sind also da und eigentlich reicht es uns auch schon, zumindest in punkto Funktionalität. Aber sicherlich fragt ihr euch, und wenn nicht, solltet ihr genau das jetzt nachholen, warum ich ein zweites Bild als Map nutze und nicht das Navigationsbild selbst. Nun, wir wollen schließlich etwas Interaktion! Darum ist das eigentliche Bild (als Hintergrund von #navigation) auch etwas größer:

Imagemap Navigation

Jetzt geben wir noch etwas JQurey hinzu:

$(document).ready(function(){
 var reiter = {
  'link1':'0 -45px',
  'link2':'0 -90px',
  'link3':'0 -135px',
  'link4':'0 -180px'
 };

 $("area").hover(function(){
  $('#navigation').css("backgroundPosition", reiter[$(this).attr('id')]);
 }, function(){
  $('#navigation').css("backgroundPosition", '0 0');
 });
});

Wir haben unseren einzelnen Navigationselementen nun also noch verschiedene Background-Positionen zugewiesen, welche zu beginn im Array “reiter” gespeichert werden. Was dann passiert ist eine einfache Verschiebung der Hintergrundgrafik nach oben und unten. Deswegen benötigen wir auch das transparente Bild für die Imagemap: Andernfalls kommt es durch die Verschiebung zu einen permanenten Flackern. Dafür gibt es zwar ein Plugin (Maphighlight), welches in diesem wunderbaren Beispiel eingesetzt wird, aber ich bin der Meinung, dass man auf die 5.1 kB Balast locker verzichten kann – do it yourself, babe ;-)

Die Kurve in Richtung SEO

Bounce-Rate ist ein entscheidender Faktor für Suchmaschinenoptimierung geworden. Daher gilt es, den User möglichst lang an die eigene Seite zu fesseln. Das bekommt ihr mit spitzenmäßigem Content hin (write what your user wanna read) und/oder mit ansprechendem Design. Eine Navigation kann Aufgrund des zentralen Position gut als Eyecather genutzt werden und bietet sich daher optimal an.

Beispiel

Wenn ihr noch nicht gleich alles verstanden habt, schaut es euch am besten mal in diesem Beispiel an. Wenn danach noch fragen auftreten, helfe ich euch gerne weiter.

Patrick

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.