HTML Imagemap – wie geht’s?
<h1>Was ist eine Imagemap?</h1>
Mit einer Imagemap kann man Teile eines Bildes mit unterschiedlichen Seiten verlinken.
Ich habe folgendes Beispiel vorbereitet:
Eine Menüführung für eine Games-Seite
Freddy Krüger imagemap
Ist mir doch ganz gut gelungen, oder?
Am besten laden Sie sich das Bild herunter und benennen es in dem Ordner, in dem Sie ihre test.html abspeichern als freddy-map.jpg
Ziel ist es nun, dieses Menü mit verschiedenen HTML Dateien zu verlinken… zu guter letzt möchte ich, daß auch ein Klick auf Freddy mich auf eine andere Seite führt.
Wie geht man nun am besten vor?
Zu allererst müssen wir das Bild in eine HTML-Seite per img-Tag einfügen.
Beispielcode HTML:
<pre><html>
<head>
</head>
<body>
<img src="freddy-map.jpg" width="800" height="80">
</body></html></pre>
Nun haben wir das Bild in unsere Seite eingefügt. Jetzt müssen wir uns die wichtigen Koordinaten notieren:
Dazu fügen wir in das image Tag ismap ein:
Beispielcode HTML:
<pre><html>
<head>
</head>
<body>
<img src="freddy-map.jpg" width="800" height="80" ismap>
</body></html></pre>
Wenn wir nun mit der Maus über das Bild fahren, geschieht noch überhaupt nichts.
Wir müssen nun das Bild verlinken:
Hierbei ist es für das Beispiel völlig egal, ob die Ziel-Datei existiert, oder nicht.
Beispielcode HTML:
<pre><html>
<head>
</head>
<body>
<a href="irgendein_ziel.html"><img src="freddy-map.jpg" width="800" height="80" ismap></a>
</body></html></pre>
Wenn Sie jetzt mit der Maus nochmals über das Bild fahren werden Sie feststellen, daß nicht nur eine Verlinkung angelegt ist… Sie werden hinter der irgendein_ziel.html ein Fragezeichen sehen, Hinter diesem Fragezeichen werden die Koordinaten jedes einzelnen Punktes auf dem Bild angezeigt.
Die Angaben sollten unten in Ihrem Browser zu sehen sein.
Wenn Sie die Angaben gefunden haben, dann bewegen Sie die Maus auf die linke obere Ecke der Startseite Schrift. Seien Sie großzügig. Der Besucher sollte keine Schwierigkeiten haben, das Button zu treffen.
freddy krüger imagemap
Ich habe mich für folgende Korrdinaten entschieden:
1,29
Der erste Wert steht für die x-Achse… also der horizontalen Linie…
Der zeite Wert für die Y-Achse… der vertiaklen Linie…
Sobald Sie die Maus nach oben bewegen wird der hintere Wert kleiner….
bewegen Sie sie nach unten wird der hintere Wert größer…
Bewegen Sie die Maus nach rechts, so muss der erste Wert größer werden…
Bewegen Sie sie nach links, wird der erste Wert kleiner….
Nun notieren wir uns die Koordinaten für die rechte untere Ecke:
140,55
Mit diesen Werten können wir das Startseite-Button verlinken.
Dazu erstellen wir nun die imagemap:
Beispielcode HTML:
<pre><html>
<head>
</head>
<map name="freddy-map"><area shape="rect" coords="1,29,140,55" href="startseite.html">
</map>
<body>
<a href="irgendein_ziel.html"><img src="freddy-map.jpg" width="800" height="80" ismap></a>
</body></html></pre>
Eine imagemap wird mit den map-Tags definiert. Sie muss einen Namen haben, damit man die map einem Bild zuordnen kann. Ich habe für diese Map den Namen freddy-map gewählt.
Innerhalb der map-Tags definiert man die zu verlinkenden Bereiche:
Diese Bereiche sind areas. Man hat vielleicht schon mal von Area 51 gehört… dem wohl bekanntesten Militärgebiet der Welt.
Eine area kann eine spezielle Form haben: Die eines Kreises, eines Rechteckes oder einer Freiform.
Das Rechteck wird mit dem Wert rect definiert… die anderen beiden erkläre ich später.
Man benötigt zuletzt noch die Koordinaten, damit der Browser weiß, welchen Bildbereich er verlinken soll.
Die Werte für die Koordinaten sollten Sie kennen…. Ich habe sie vorhin notiert. Sie sollten dies auch für sich getan haben.
Um nun das Startseite Button mit der Map zu verknüpfen müssen wir noch das ismap entfernen und dafür folgendes einfügen: usemap=“#freddy-map“. In Ihrem Beispiel könnte es ein anderer Name sein. Wichtig ist, daß der Name der map als Wert für usemap beim Bild verwendet wird. Ebenfalls wichtig ist, daß vor den Namen eine Raute geschrieben wird. #
Beispielcode HTML:
<pre><html>
<head>
</head>
<map name="freddy-map"><area shape="rect" coords="1,29,140,55" href="startseite.html">
</map>
<body>
<a href="irgendein_ziel.html"><img src="freddy-map.jpg" width="800" height="80" usemap="#freddy-map"></a>
</body></html></pre>
Wenn Sie nun mit der Maus über Startseite fahren, sollte unten der Link auf startseite.html springen.
Wir tauschen nun nochmals usemap=“freddy-map“ mit ismap aus um die nächsten beiden Buttons zu verlinken… machen Sie dies genauso wie oben beschrieben.
freddy krüger imagemap
Sie sollten dann auf folgendes Ergebnis kommen:
Gamers-Shop
207,29
371,55
FSK-18 Shop:
430,29
588,55
Der Code sollte dann folgendermaßen aussehen:
Beispielcode HTML:
<pre><html>
<head>
</head>
<map name="freddy-map"><area shape="rect" coords="1,29,140,55" href="startseite.html"><area shape="rect" coords="207,29,371,55" href="gamersshop.html"><area shape="rect" coords="430,29,588,55" href="fsk18shop.html">
</map>
<body>
<a href="irgendein_ziel.html"><img src="freddy-map.jpg" width="800" height="80" usemap="#freddy-map"></a>
</body></html></pre>
Nun knöpfen wir uns Freddy vor.
Um es sich etwas leichter zu machen könnten wir beispielsweise einen Kreis um Freddy ziehen.
Dazu suchen wir uns einen zentralen Punkt in Freddy und errechnen uns den notwendigen Radius.
Ich würde als zentralen Punkt 729,40 nehmen.
Ein Radius von 48 wäre ausreichend. Dazu habe ich mir rechts einen Punkt gesucht, der außerhalb von Freddy in der Nähe liegt. Der lag bei 775,40… Dann habe ich mir das Gegenstück auf der linken Seite gesucht: Der lag bei 680. Die Differenz ist vom linken Punkt zum mittleren: 49 (729-680) und vom rechten zum mittleren: 46 (775-729).
Um nun diesen Kreis als Linkbereich in die Map einfügen zu können verwenden wir circle als Shape:
Beispielcode HTML:
<pre><html>
<head>
</head>
<map name="freddy-map"><area shape="rect" coords="1,29,140,55" href="startseite.html"><area shape="rect" coords="207,29,371,55" href="gamersshop.html"><area shape="rect" coords="430,29,588,55" href="fsk18shop.html"><area shape="rect" coords="729,40,48" href="freddy.html">
</map>
<body>
<a href="irgendein_ziel.html"><img src="freddy-map.jpg" width="800" height="80" usemap="#freddy-map"></a>
</body></html></pre>
Wenn Sie nun mit Ihrer Maus in diesen Kreis-Radius bei Freddy kommen, sollte sich der Link in freddy.html ändern.
Da wir perfektionistisch veranlagt sind, wollen wir uns nicht mit einem Kreis zufrieden geben.
Wir setzen das poly-Shape ein. Das bedeutet, daß wir die Koordinaten wichtiger Punkte bei Freddy notieren….
Ich zeige Ihnen mal die für mich wichtigen Punkte:
freddy krüger imagemap
Beginnen wir bei dem grünen und bewegen uns im Uhrzeiger Sinn…
Notieren Sie sich bitte die Koordinaten jedes einzelnen Punktes.
Wir werden nun das Poly-Shape verwenden: (Poly ist die Abkürzung für Polygon… also ein vieleck)
Beispielcode HTML:
<pre><html>
<head>
</head>
<map name="freddy-map"><area shape="rect" coords="1,29,140,55" href="startseite.html"><area shape="rect" coords="207,29,371,55" href="gamersshop.html"><area shape="rect" coords="430,29,588,55" href="fsk18shop.html"><area shape="poly" coords="743,1,
746,8,
754,5,
765,7,
758,21,
757,34,
773,52,
786,67,
788,79,
687,79,
684,60,
689,48,
696,45,
684,60,
693,36,
692,29,
687,25,
676,17,
694,12,
702,1" href="freddy.html">
</map>
<body>
<a href="irgendein_ziel.html"><img src="freddy-map.jpg" width="800" height="80" usemap="#freddy-map"></a>
</body></html></pre>
Bewegen Sie nun nach getaner Arbeit den Mauszeiger über Freddy… Sie werden feststellen, daß wir eine sehr gute Arbeit abgeliefert haben…
Das wäre eine Imagemap par excellence. Nun fügen wir noch die alt und title Tags ein und es ist alles perfekt.
Beispielcode HTML:
<pre><html>
<head>
</head>
<map name="freddy-map"><area shape="rect" coords="1,29,140,55" href="startseite.html" alt="startseite" title="startseite"><area shape="rect" coords="207,29,371,55" href="gamersshop.html" alt="Games-Shop" title="games-shop"><area shape="rect" coords="430,29,588,55" href="fsk18shop.html" alt="fsk-18-Shop" title="fsk-18-Shop"><area shape="poly" coords="743,1,
746,8,
754,5,
765,7,
758,21,
757,34,
773,52,
786,67,
788,79,
687,79,
684,60,
689,48,
696,45,
684,60,
693,36,
692,29,
687,25,
676,17,
694,12,
702,1" href="freddy.html" alt="freddy" title="freddy">
</map>
<body>
<a href="irgendein_ziel.html"><img src="freddy-map.jpg" width="800" height="80" usemap="#freddy-map" alt="imagemap" title="imagemap"></a>
</body></html></pre>
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
