Facebook Button Twitter Button YouTube Button RSS Button

IT-Runde

Nützlicher Online Image-Map Generator

  • Nützlicher Online Image-Map Generator

    Ohne Verlinkungen würde es das Internet wir wir es kennen ja gar nicht geben, deswegen lebt es von Links in allen möglichen Variationen. Reine Textlinks sind schon lange nicht mehr das einzige – Ob Bilder, Div’s oder ähnliches, alles kann man mit Links ausstatten. Aber was ist nun, wenn man ein größeres Bild hat, und Teile auf diesem verlinken will? Mit Photoshop das Bild slicen und die makierten Stellen dann verlinken ist nicht nur umständlich und bei einer Änderung sehr aufwendig, es wirkt zudem noch sehr unprofessionell und der Server braucht länger, um alle einzelnen Bildteile auszugeben. Die Lösung ist eine so genannte Image-Map!

    Als Beispiel nehme ich mal die Grafik von mir, welche ihr rechts seht. Diese ist als kleine Übersicht dazu geeignet die einzelnen Zahlungsarten für eine Bestellung auszugeben. Wie man leicht sieht, ist diese in verschiedene Abschnitte geteilt, sodass man nachher „PayPal“, „Sofortüberweisung“, „Vorauskasse“ etc. auswählen kann. Wie oben schon beschrieben gibt es da den Trick namens „Image-Map“ um unsere Idee umzusetzen. Folgender Grundcode liegt dabei zugrunde:

    1
    2
    3
    4
    
    <img src="bild.jpg" usemap="#itrunde"  id="itrunde" width="350" height="473" alt="" />
    <map id="_itrunde">
    <area shape="rect" coords="274,142,293,159" target="_blank" href="/dateien/it-runde.pdf" alt="" title="" />
    </map>

    Eigentlich ganz simpel aufgebaut, das einzige was immer etwas kniffelig ist, sind die Koordinaten. Diese kann man sogar mit Paint ermitteln, doch meist möchte man sehen, welche Bereiche man schon genutzt hat. Deshalb nehme ich persönlich mir immer einen Generator zur Hand, damit geht es schnell und noch unkomplizierter ;).

    Online Generator

    Mein persönlicher Favorit ist hierbei der Online Image Map Editor von Machek. Einfach Bild hochladen oder die URL des hochgeladenen Bildes eingeben und schon kann man verschiedene Teile/Areas des Bildes verlinken. Genial finde ich dabei auch runde oder eckige Areas auswählen zu können – Gut gemacht!. Ein weiterer Pluspunkt ist die sofortige Benennung der einzelnen Bereiche und der dazugehörigen target (Also ob man die Bilder im selben Frame, im neuen Fenster o.ä. öffnen möchte).

    Ist man mit dem Makieren fertig, kann man sich über den HTML-Button sofort den fertigen Quelltext ausgeben lassen oder sich erstmal die entgültige Ausgabe anzeigen lassen. Beim ausgegebenen Quelltext müsst ihr übrigens noch wie im oberen manuellen Beispiel von mir das img-Tag einfügen, sonst klappt die ganze Sache natürlich nicht :D.

    Viel Spaß beim ausprobieren! 😉

  • Kostenlose IT-Tipps

    • Nebenbei ein Online Business aufbauen
    • Passiv Geld generieren
    • Online Trends (Nischenseiten, SEO, Google & Co.)

     
     


  1. #1 Dominique
    17.02.2013 um 22:50 Uhr

    schöner Beitrag
    Meine persönliche Alternative für Online Generator bei Imagemaps wäre:
    http://imagemap-generator.dariodomi.de/

    Post ReplyPost Reply
  2. #2 Philipp
    18.11.2017 um 11:47 Uhr

    Netter Beitrag, wenn auch schon etwas älter :).

    Die Erstellung einer Bildbeschreibung oder Image Map geht mit Imagemarker etwas einfacher.
    Der Bildeditor kann ohne Anmeldung genutzt werden und ist sehr übersichtlich. Der Code ist responsive und kann direkt auf der eigenen Website eingebunden werden. Wenn es interessiert, hier der Link http://www.imagemarker.com

    LG Philipp

    Post ReplyPost Reply
  • Trackback: Artikel-Empfehlung KW 10 2011 - Alles IT Trackbacks
  • Kommentar schreiben