Schlösselgasse 28/8, 1080 Wien

Mehrere Links auf einem Bild in html erstellen

Bewertung: 0 / 5

Stern inaktivStern inaktivStern inaktivStern inaktivStern inaktiv
 

Wir zeigen euch wie man mehrere Links auf einer Grafik oder einem Bild erstellen kann. Das Zauberwort dazu nennt sich Imagemap

 Ab und zu kommt es vor, dass man Grafiken verlinken muss. Als Beispiel haben wir auf unserer Startseite folgendes Bild umgesetzt, welches wir mit mehreren verschiedenen Links versehen wollen. Das geht mit einem HTML Code names Imagemap. Der Code sieht wie folgt aus: 

map id="imgmap201461518465" name="imgmap201461518465"><area shape="rect" alt="IT Lexikon" title="" coords="1,3,427,261" href="/it-lexikon" target="_self" /><area shape="rect" alt="IT Blog" title="" coords="430,3,850,258" href="/it-blog" target="_self" /></map

Imagemap Online Editor macht alles einfacher

Wir haben ein kostenloses Online Portal gefunden, welches und die Arbeit erspart den Code selbst zu schreiben. Dieses ist zu finden unter http://www.maschek.hu/imagemap/imgmap. Die Bedienung des Tools ist realtiv einfach. Im Ersten Schritt laden Sie ihr Bild hoch, im zweiten Schritt markieren bzw. definieren Sie Bereiche bei welchen Sie dann die Verlinkungen definieren könne und Ihr persönlicher HTML Code ist fertig. 

Hier als Beispiel unsere Grafik für die Startseite:

Image-Map-Beispiel

Code zusammenführen

Im letzten Schritt müssen Sie nun den erzeugten Code in Ihr HTML File einfügen (oder in Ihr CMS) und Ihre Codezeile "<img src>" mit dem Attribut "usemap="NAME" " zu ergänzen. In unserem Code würde es dann wie folgt aussehen: 

img src="/images/footer.jpg" usemap="imgmap201461518465" width="100%" height="100%" alt="footer" style="display: block; margin-left: auto; margin-right: auto;" 

map id="imgmap201461518465" name="imgmap201461518465"><area shape="rect" alt="IT Lexikon" title="" coords="1,3,427,261" href="/it-lexikon" target="_self" /><area shape="rect" alt="IT Blog" title="" coords="430,3,850,258" href="/it-blog" target="_self" 

 

Unsere Leistungen

Bleiben wir in Kontakt!

ithelps Online Marketing Agentur Logo

1080 Wien, Schlösselgasse 28/8
3032 Eichgraben, Pernerstorferstraße 18

  • Email: office@ithelps.at
  • Phone: +43(1) 353 2 353

Die 10 häufigsten SEO Fehler

und wie Sie diese vermeiden können: