Wie erstelle ich eine HTML-Image-Map?

Wenn einem Bild in HTML (Hypertext Markup Language) ein Link hinzugefügt wird, wird dieser Link dem gesamten Bild hinzugefügt. Dies kann ein Problem sein, wenn der Programmierer ein einzelnes Bild mit mehreren Bereichen oder Schaltflächen erstellen möchte und jeder Bereich für eine andere Verknüpfung verwendet wird. Mit einer HTML-Image-Map kann der Programmierer bestimmte Bereiche angeben, in denen der Link eingefügt werden soll, und so mehrere Links in ein Bild einbetten. Dazu geben Sie eine Form für den Link an und teilen dem HTML mit, welche Koordinaten für den Link verwendet werden sollen.

Für das Internet verwendete Bilder werden in Pixel gemessen. Zu wissen, wie viele Pixel das Bild enthält, ist der erste wichtige Schritt zur Erstellung einer Imagemap. Beispielsweise wird ein rechteckiges Bild mit einer Höhe von 400 Pixel und einer Breite von 250 Pixel verwendet. Als nächstes muss der Programmierer wissen, wie die Form in Koordinaten genau gemessen wird, damit die HTML-Image-Map ordnungsgemäß funktioniert.

Die linke obere Ecke wird bei Verwendung einer HTML-Imagemap als 0,0 bezeichnet. Die untere rechte Ecke wäre in diesem Fall 250.400. Die Messungen werden zuerst mit der Breite und dann mit der Höhe durchgeführt. Ein einfacher Weg, sich das vorzustellen, ist, dass die erste Messung dem HTML sagt, wie weit es vom linken Rand nach rechts und die zweite, wie viele Pixel nach unten geht. Wenn der Programmierer möchte, dass ein Punkt auf der Karte 10 Pixel vom linken Rand und 50 Pixel nach unten entfernt ist, sind die Koordinaten 10,50.

Es gibt drei verschiedene Formen, die der Programmierer für eine HTML-Imagemap aufrufen kann: Rect, Circle und Polygon. "Rect" steht für "Rect" und der Programmierer muss zuerst die Koordinaten für die linke obere Ecke und dann die rechte untere Ecke eingeben. Ein Kreis wird festgelegt, indem die Koordinaten, an denen der Kreis beginnt, und dann der Radius des Kreises eingegeben werden. Ein Polygon wird durch Eingabe aller fünf Koordinaten von oben nach rechts erstellt.

Die Codierung der HTML-Bildzuordnung sieht folgendermaßen aus:
<map name = "test">
<area href = "url.html" shape = rect coords = "10,50,20,60">
<area href = "url.html" shape = circle coords = "10,50,4">
<area href = "url.html" shape = polygon coords = "10,50,12,55,15,60,13,65,8,55">

Jede HTML-Imagemap muss einen Namen haben, und der Abschnitt "url.html" ist der Link, über den dieser Abschnitt der Imagemap einen Benutzer führt, wenn er darauf klickt. Wenn das Bild mit HTML auf der Website platziert wird, muss der Programmierer schreiben: usemap = "test". Dadurch wird dem Bild mitgeteilt, welche HTML-Image-Map verwendet werden soll.