IT-Academy Logo
Sign Up Login Help
Home - Programmieren - HTML - Image Maps erstellen mit AceHTML 5



Image Maps erstellen mit AceHTML 5

Dieses Tutorial will Ihnen zeigen, wie Sie Image Maps mit Leichtigkeit erstellen.


Autor: Patrick Faes (dreamer)
Datum: 30-12-2003, 00:17:52
Referenzen: keine
Schwierigkeit: Fortgeschrittene
Ansichten: 7062x
Rating: 9.5 (2x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einleitung

Dieses Tutorial über Image Maps ist dreiteilig:
  • Eine theoretische Einführung und ein Beispiel
  • Ein Tutorial wie man ein Image Map erstellt mit AceHTML 5
  • Eine Erklärung des HTML-Codes
Theorie der Image Maps

Jeder kennt wohl die Technik womit man eine Grafik mit einem Link hinterlegt. Nun, dies ist eigentlich das was ein Image Map auch ist. Sie unterscheidet sich allerdings dadurch, dass eine Image Map nicht einen, sondern mehrere Links hat. Wie dies geht? Auf der Grafik werden verschiedene Bereiche einzeln mit einem Link hinterlegt. Allerdings möchte ich hier schon mal darauf hinweisen dass man den Besucher dann auch deutlich machen soll wo sich die Links befinden. Ich möchte dies mal mit einem Beispiel demonstrieren.



Ein Bild aus Worms 3D, © 2002-2003 Team17 Software Limited

Wie Sie gerade selbst gesehen haben, weiß der User nicht auf Anhieb wo die Links versteckt sind (falls Sie nicht alle 5 gefunden haben: der Radar links oben, das Kompass links unten, die Explosion in der Mitte, der Wurm selbst und die Anzeige rechts unten), und deshalb sollte man schon einen deutlichen Hinweis einbauen oder eine zweite Navigation mit normalen Text-Links hinzufügen.

Die Links können sowohl interne wie externe Links haben wie auch Javascript. Aber darauf komme ich im dritten Teil zurück.
Es gibt zwei Arten von Image Maps: Client-seitige und Server-seitige. Letzterer ist allerdings sehr belastend für den Server und wird deshalb auch nur sehr selten benutzt. Dieses Tutorial basiert dann auch auf Client-seitige Image Maps.

Image Maps erstellen mit AceHTML 5

AceHTML ist ein kostenloser HTML-Editor (und zwar ein ziemlich guter) mit einem eingebauten Editor für Image Maps. Diese Software kann man hier downloaden, allerdings ist eine Registrierung notwendig.
Nach dem Öffnen wählt man oben die Option Image in der Task-Leiste und danach wählt man darunter ein blaues Rechteck. Dies ist die Option "Image Map" (alternativ kann man auch Shift + Alt + M drücken).



Es öffnet sich ein neues Fenster. Als erstes sollte man links oben einen Namen (Identifier) eingeben.



Danach sollte man am linkeren Bildschirmrand das obere der vier Symbole anklicken. Wiederum öffnet sich ein neues Fenster.



Hierin kann man die üblichen Parameter für Grafiken setzen (Breite, Höhe, ALT-Text, usw.). Wenn man fertig ist, klickt man auf OK.
Danach kann man im Bild die Felder andeuten die man mit einem Link belegen möchte. An der linken Seite stehen wiederum die Optionen "Type of Shape" und "Add zone".



Zuerst wählt man eine Form. Die Software bietet Rechtecke, Kreise und Polygone (Polygone sind frei definierbare Vielecke).
Danach selektiert man ein Feld auf dem Bild (geht wie bei jedes Malprogramm) und danach wählt man die Option "Add Zone" (wobei man die Wahl hat zwischen externer Link, internet Link und kein Link). Es öffnet sich ein neues Fenster worin man die gelinkte Adresse, Art des Links und ein Tooltip setzen kann (AceHTML hat anscheinend Probleme mit Leerzeichen, diese sollte man später manuell hinzufügen). Desweiteren kann man andeuten, dass verlinkt wird zu einem Anker im Dokument und das Zielfenster.



Wenn man nochmal von vorne anfangen möchte, klickt man auf die unterste Option "Reset". Wenn man fertig ist, klickt man auf OK.
Jetzt kommt man wieder im Editor wo man den HTML-Code manuel bearbeiten kann.

Der HTML-Code

Lassen wir uns erst mal ansehen wie ein Image Map definiert wird:

<map name="">
<area shape="" coords="" href="">
</map>

<img src="" usemap="#Name">


Zuerst muss in <map> ein Name vergeben werden, sodass später im <img>-Tag darauf verwiesen werden kann (hierfür ist das #-Zeichen notwendig).
Im <area>-Tag wird ein Feld spezifiziert. Zuerst wählt man mit shape="" die Form. Es gibt dazu 4 Möglichkeiten:
  • Ein einzelner Punkt (point)
  • Ein Kreis (circle)
  • Ein Rechteck (rect)
  • Ein frei definierbares Vieleck (polygon)
Nachdem man die Form gewählt hat, muss man die Koordinaten bestimmen im coords=""-Attribut. Die Koordinaten sehen so aus: X-Koordinate (von links unten nach rechts) und Y-Koordinate (von links unten nach oben). Diese stehen dann immer in Paare und zwar so: coords="41,163 85,37"
Wenn es mehrere Punkte gibt, werden die Koordinaten-Paare durch eine Leerstelle getrennt.
Für die verschiedene Formen werden die Koordinaten jeweils anders berechnet:
  • ein Punkt: hier wird nur ein Punkt angegeben; coords="14,56"
  • ein Kreis: hier wird der Mittelpunkt angegeben plus der Strahl (Abstand vom Mittelpunkt bis zur Außenseite); coords="85,47 29" (beachten Sie die Leerstelle!)
  • ein Rechteck: hier müssen zwei Punkte angegeben werden, links unten und rechts oben; coords="24,12 98,77"
  • ein Vieleck: hierbei gibt man soviele Punkte an wie man möchte, der Browser verbindet diese dann zu einem Vieleck (der letzte Punkt sollte auch der Erste sein); coords="53,86 84,63 71,99 53,86"
Danach muss noch ein Link hinzugefügt werden. Dies kann man indem man den <area>-Tag erweitert mit einem href=""-Attribut. Desweiteren sind auch ein Target="" und ein Title="" möglich.

Als letztes muss jetzt noch das Bild definiert werden. Wie oben zu sehen, muss dem <im>-Tag das Attribut usemap="#" hinzugefügt werden. Desweiteren empfiehlt es sich die Breite und Höhe fest zu legen, da manche Software die Bilder mal etwas verkleinert und vergrößert, wodurch es Probleme mit den Koordinaten gibt.

Und zum Abschluss, der Code vom obigen Beispiel:

<map name="Test">
<area shape="circle" coords="42,54 32" href="http://www.it-academy.cc" target="_blank" title="Zur Startseite der IT-Academy">
<area shape="rect" coords="175,95,254,209" href="mailto:office@it-academy.cc" title="IT-Academy kontaktieren">
<area shape="rect" coords="181,245,239,362" href="http://www.it-academy.cc/forum/index.php" target="_blank" title="Zum Forum">
<area shape="polygon" coords="15,317,35,297,57,301,74,327,72,344,90,354,92,378,75,394,58,377,29,375,12,344" href="http://www.google.com" target="_blank" title="Lass uns mal Googlen">
<area shape="polygon" coords="365,381,360,391,334,388,333,359,345,340,350,310,364,301,357,272,378,273,374,293,394,307,407,332,407,347,414,364,415,374,410,391,388,394,375,384,369,377,367,378" href="http://www.lycos.de" target="_blank" title="Zum Hund Lycos">
</map>
<img src="worms3D.gif" border="0" width="420" height="404" alt="" usemap="#Test">


dreamer
Expert
Beitrag vom:
10-07-2004, 10:10:11

Fehler wurde korrigiert.

-----------------------------------------------------


picard
Professonial
Beitrag vom:
30-12-2003, 01:23:02

ich glaube den google polygon müsstest Du nochmal anpassen. Bei mir ist der nämlich alles andere als am Kompass, sondern weit darunter ;-9

-----------------------------------------------------
"...denn wir arbeiten nicht nur um uns selbst zu verbessern, sondern auch den Rest der Menschheit!"


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04506
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06241
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1140
Comments: 0