Der erklärt uns das jetzt mal: "Ein Image ist ein Bild (schau mich an!), aber nicht nur das. Sonst kannst du ja nur einen Verweis -sprich: Link- auf ein Bild setzen, aber ich bin zum Beispiel 64 mal 70 groß, Pixel versteht sich. Da könnte man doch, ich meine, es müßte doch irgendwie, ähm wie war das noch mal . . ." Ganz einfach, kleiner Schneemann, dein Zylinder soll auf den Anfang dieser Seite zeigen, also die Übersicht oben, und dein Bauch auf die Aufgaben unten, und diese Verweise nennt man Maps.
Beispiel gefällig? Bitte schön:Das ist eine Riesengrafik, laut MS Photo-Editor 399 mal 117 Pixel, oder, um genau zu sein: 400 mal 118 (Warum? Weil die Null mitzählt). In dieser Grafik seht ihr zwei Dreiecke, eine Spirale und das Fragezeichen. Und daraus basteln wir uns jetzt ein IMAGE-MAP!
<<<Teil 1: Das Bild als Image-Map vereinbaren: Das ist einfach, du gibst dort, wo das Bild eingebunden wird, an, dass du das Bild als Image-Map benutzen willst. Das Bild oben hat den Namen "imagemap.jpg", also:
<img src="imagemap.jpg" border=0 usemap="#ein_beispiel" alt="Imagemap-Beispiel">
Mit usemap sagst du HTML, dass das Bild als Image-Map benutzt wird, und nach dem Gleichheitszeichen kommt der Name, unter dem das Bild angesprochen wird: hier ein_beispiel, beachte das # vor dem Namen.
Teil 2: Die Maps vereinbaren: Du kannst auf drei Arten und Weisen einen Bild-Bereich auswählen:<map name="ein_beispiel"> <area shape=circle coords="148,44,60" href="kurs_re.htm"> </map>Das map-Tag steht also für die Liste, beachte den Namen ein_beispiel, der angibt, zu welcher Grafik diese Liste gehört (jetzt aber ohne #!). Mit shape gibst du an, ob es ein Kreis (circle) oder ein Rechteck (rect) sein soll. Es geht auch ein Dreieck, aber dazu gleich mehr. Dann kommen die Koordinaten: coords="x1,y1,r" und schließlich der Verweis (href="kurs_re.htm"), also der Ort, zu dem du springen willst. Kompliziert, ja schon, aber . . . Kommen wir lieber zum
<map name="ein_beispiel"> <area shape=rect coords="245,0,295,84" href="html_editor.htm"> </map>Statt circle ist es jetzt ein Rechteck (rect) mit den Koordinaten coords="x1,y1,x2,y2". Bleibt noch das
<map name="ein_beispiel"> <area shape=poly coords="0,45,53,13,53,90" href="3w7_.htm"> </map>Statt circle jetzt also poly, das steht für Polygon und gemeint ist ein n-Eck. Die Koordinaten-Liste ist auch länger geworden: coords="x1,y1,x2,y2,x3,y3".
<map name="ein_beispiel"> <area shape=circle coords="148,44,60" href="kurs_re.htm"> <area shape=rect coords="245,0,295,84" href="html_editor.htm"> <area shape=poly coords="0,45,53,13,53,90" href="3w7_.htm"> </map>