ImageMaps für saubere Menu's
Schöne, witzige, aufgeräumte etc. Menus lassen sich mit Hilfe von Image-Maps kreieren.
Grundsätzlich bestehen Image-Maps aus einem Bild und einem daruntergelegten Koordinatensystem, das die anklickbaren Punkte des Bildes definiert und mit den entsprechenden Links verbindet. Man klickt dann also auf das Bild und wird mit der gewählten Seite verbunden. Ein Beispiel:
![]()
Dazu der Source-Code:
<MAP NAME="menumap">
<!--Picture C:\Projects\Web\MySite\pics\menu.GIF-->
<AREA SHAPE="RECT" COORDS="5,9,178,73" HREF="tricks.html">
<AREA SHAPE="RECT" COORDS="7,75,154,143" HREF="links.html">
<AREA SHAPE="RECT" COORDS="7,145,164,215" HREF="marc.html">
<AREA SHAPE="RECT" COORDS="7,217,294,280" HREF="gast.html">
<AREA SHAPE="RECT" COORDS="3,286,138,350" HREF="mailto:mva@active.ch">
</MAP>
<IMG SRC="menu2.gif" WIDTH=300 HEIGHT=400 BORDER=0 USEMAP="#menumap">
Du siehst den Aufbau der Tags: Zuerst kommt der Name der Image-Map, dann die einzelnen Felder. Diese Felder werden definiert durch eine Form ("RECT") und ihre Koordinaten. Zuhinterst steht der Link, an den das Feld führt. Und zuletzt steht noch die Source des Bildes und der Link auf die dazugehörige Map.
Soweit so gut, das sieht ja alles recht einfach aus. Ist es auch, eigentlich. Das einzige Problem ist die Definition der Koordinaten. Versuch mal, die Pixel von links nach rechts und von oben nach unten zu zählen, um den Anfangs- und den Endpunkt des Feldes anzugeben! (Ein Feld definiert sich durch den Punkt links oben und den Punkt rechts unten). Klar schaffst Du es (mit viel Zeit und noch mehr Geduld) auch auf diese Weise...
Aber warum denn so kompliziert, schliesslich hast Du einen PC um Dir die Arbeit zu erleichtern und nicht, um sie zu erschweren! Es gibt denn auch haufenweise Shareware-Programme (beispielsweise MapThis!), um Dir die Arbeit mit Image-Maps fast ganz abzunehmen. Am einfachsten geht es aber mit einem in den Editor integrierten Unterprogramm, z.B. mit dem Image-Map-Builder von WebEdit 2.0. Die Map wird dann automatisch generiert und plaziert, Du brauchst Dich nicht um zwei Programme zu kümmern.
Das geht nun folgendermassen:
In WebEdit fügst Du mit dem 'Inline Image'-Menubutton ein Bild ein, und im entsprechenden Optionsfeld des nachfolgenden 'Image'-Dialoges giebst Du die Source des Bildes an und klickst auf 'Use Mapping' und dann auf den 'Map Builder'-Knopf. Jetzt musst Du nur noch die Felder markieren (und nach dem Markieren gleich unten links die URL der gewünschten Seite eingeben) und der Map einen Namen zu geben (oben rechts), fertig.
Du wirst sehen, es ist noch viel einfacher als es hier scheint...