Image-Map, erklärt von Diethelm Glaser

Heute habe ich mich mal dazu durchgerungen, ein Image-Map (HotSpots?) nach der Anleitung von Self-HTML zu machen.
Grundlage ist mein Familienfoto vom Jahr 2000, zu sehen ist alles hier

Man kann die Koordinaten ganz einfach mit einem Bildbearbeitungsprogramm ermitteln: dort, wo der Mauszeiger ist, also oben links bei einem Viereck, sind die beiden ersten, dann fährt man nach unten rechts, liest dort die zwei Koordinaten ab, schon hat man alle vier.

Ein Viereck (shape="rect") definiert man mit den Koordinaten für x1 (= linke obere Ecke, Pixel von links), y1 (= linke obere Ecke, Pixel von oben), x2 (= rechte untere Ecke, Pixel von links), y2 (= rechte untere Ecke, Pixel von oben)

Einen Kreis (shape="circle") definiert man mit den Koordinaten für x (= Mittelpunkt, Pixel von links),y (= Mittelpunkt, Pixel von oben) und r (Radius in Pixel)

Ein Polygon (shape="poly") definiert man mit den Koordinaten x1 (= Pixel einer Ecke von links), y1 (= Pixel einer Ecke von oben) ,x2,y2 usw
Man kann so viele Ecken definieren wie man will.

Nachdem Frontpage-Express das Beispiel nicht in der HTML-Ansicht einbinden wollte, machte ich es mit Notepad.
Das Ergebnis:

<body>

<h1>Schnell zu den einzelnen Seiten!</h1>
<map name="Familienfoto">
<area shape="rect" coords="13,172,99,371" href="maximilian.htm" alt="Maximilian">
<area shape="rect" coords="79,18,205,333" href="diethelm.htm" alt="Diethelm">
<area shape="rect" coords="234,108,282,395" href="petra.htm" alt="Petra">
<area shape="rect" coords="281,199,344,298" href="yannick.htm" alt="Yannick">
<area shape="rect" coords="344,189,408,318" href="kiddies.htm" alt="André">
<area shape="rect" coords="386,150,460,392" href="thorsten.htm" alt="Thorsten">
<area shape="rect" coords="460,173,560,396" href="sven-udo.htm" alt="Sven-Udo">
</map>
<p><img src="pics/familie2.jpg" width="600" height="427" border="0"
alt="Familienfoto" usemap="#Familienfoto"></p>
</body>

Nun ließ mir das keine Ruhe, aber FP-E stürzte nun sogar ab!
Also machte ich soweit alles fertig, kopierte den ganzen Code in die bestehende HTML-Seite,
speicherte ab (mit Notepad), und rief es mit FP-E wieder auf, das Ergebnis:

<h1 align="center"><font size="5">Schnell zu den einzelnen
Seiten!</font></h1>

<p align="center"><MAP NAME="FrontPageMap0"><AREA SHAPE="RECT" COORDS="13, 172, 99, 371" HREF="maximilian.htm"><AREA SHAPE="RECT" COORDS="79, 18, 205, 333" HREF="diethelm.htm"><AREA SHAPE="RECT" COORDS="234, 108, 282, 395" HREF="petra.htm"><AREA SHAPE="RECT" COORDS="281, 199, 344, 298" HREF="yannick.htm"><AREA SHAPE="RECT" COORDS="344, 189, 408, 318" HREF="kiddies.htm"><AREA SHAPE="RECT" COORDS="386, 150, 460, 392" HREF="thorsten.htm"><AREA SHAPE="RECT" COORDS="460, 173, 560, 396" HREF="sven-udo.htm"></MAP><img src="pics/familie2.jpg" alt="Familienfoto" border="0" width="600" height="427" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" usemap="#FrontPageMap0"></p>

Da muss ich nun auch sagen, FP-E bläht den Code auf, aber die Alternative ist, die Editor (Notepad)-Version zu nehmen
und die Seite nicht mehr mit FP-E zu öffnen, weil sonst der Code wieder umgewandelt wird. Die targets habe ich natürlich rausgelöscht.

Ich habe beide Versionen ausprobiert, weiß aber nicht, ob die zweite nur im IE oder generell funktioniert.

wer die Seite direkt aufgerufen hat, klickt bitte hier , um zur Startseite zu kommen.
Diese Seite wurde am 17. Januar 2004 erstellt, letzte Änderung am 06. August 2011
© Diethelm Glaser, alle Rechte vorbehalten | Seite 1.656

seit 19.05.2007:	seit 13.11.2008: