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 David
    28.02.2011 um 20:19 Uhr

    Hallo,

    kenne die Seite auch schon sehr lange 😉
    ist echt ein super Ding 😉

    Grüße
    David

    Post ReplyPost Reply
  2. #2 Massivholzbetten
    01.03.2011 um 16:12 Uhr

    ooh das ist guut! das ist verdammt gut!! nach sowas hab ich ewig gesucht. FETTES DANKE!!!!

    Post ReplyPost Reply
  3. #3 Francesco
    01.03.2011 um 18:57 Uhr

    Klasse Tool, habe schon selbst iMaps erstellt, aber genau wie du sagtest aufwendig mit Photoshop/Paint. Habe den Generator vorhin getestet, eine echte Erleichterung, danke 😉

    Post ReplyPost Reply
  4. #4 Eheringe
    04.03.2011 um 15:33 Uhr

    Wirklich super, das vereinfacht doch einiges^^ Dankeschön!

    Post ReplyPost Reply
  • Trackback: Artikel-Empfehlung KW 10 2011 - Olis Computerblog Trackbacks
  • Kommentar schreiben