Online HTML-Kurs (Teil 17): Clientseitige Imagemaps mit dem map- und dem area-Tag
Clientseitige Imagemaps sind meistens Bilder in denen einzelne Regionen oder Bildausschnitte angeklickt werden können und hinter denen sich ein Link verbirgt.
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<center><h1>Bitte auf Berlin oder München klicken</h1></center>
<img src="" usemap="#Karte">
<map name="Karte">
<area accesskey="b" alt="Berlin" href="http://de.wikipedia.org/wiki/Berlin" target="_blank" shape="rect" coords="379, 212, 399, 232">
<area accesskey="m" alt="München" href="http://de.wikipedia.org/wiki/M%C3%BCnchen" target="_blank" shape="poly"coords="280, 555, 330, 555, 330, 590, 400, 590, 400, 620, 280, 620">
<area accesskey="k" alt="Köln" href="http://de.wikipedia.org/wiki/K%C3%B6ln" target="_blank" shape="circle"coords="67, 347, 20">
</map>
</body>
</html>
Und so siehts aus:
Bitte auf Berlin oder München klicken
Dabei wird mit dem <img>-Tag ein Bild eingebunden, welches über das Attribut "usemap" mit dem <map>-Tag verbunden ist. Der Name sollte deswegen auch identisch sein, wobei das Attribut "usemap" für den Namen ein führendes # benötigt, welches beim <map>-"name"-Attribut nicht benötigt wird.
Innerhalb des <map>-Containers werden dann mit dem <area>-Tag die anklickbaren Ausschnitte definiert, wobei das <area>-Tag keine Endmarke besitzt und alle wichtigen Angaben als Attribute angegeben werden.
Das erste Attribut "accesskey" legt ein Tastenkürzel fest, mit dem man per Tastatur den gewünschten Bereich anwählen kann, falls keine Maus zur Verfügung steht. Dabei wird ein einzelnes Tastaturzeichen verwendet, so dass man dann mit "ALT"+"Tastaturzeichen" dem gewünschten Link folgen kann.
Mit dem Attribut "alt" kann man einen alternativen Text hinterlegen, falls kein Bild angezeigt werden kann.
Mit "href" kann man ein Linkziel definieren. Verwendet wird es hier genauso wie in Teil 5. Hat man einen aktiven Bereich der kein Linkziel enthalten soll, so wird das Attribut "nohref" mit dem gleichnamigen Wert "nohref" verwendet.
Ein weiteres Attribut ist "target", welches ebenfalls in Kapitel 5 zum ersten mal im Einsatz war und mit dem definiert werden kann, ob zum Beispiel ein neues Browserfenster geöffnet werden soll. Erlaubt Werte sind "_self", "_parent", "_top" oder "_blank".
Zum Schluss kommen die beiden wichtigsten Attribute: "shape" und "coords".
Mit "shape" wird die Form des anklickbaren Bereiches festgelegt. Die wichtigsten Werte für das Attribut "shape" (zu dt. Form) sind "rect" (Rechteck), "circle" (Kreis) und "poly" (Polygon). Hat man mit "shape" sich für eine Form entschieden, so kann man mit "coords" dann den gewünschten Bereich in Koordinaten angeben. Dabei ist die Koordinatenangabe abhängig von der Form des Bereiches.
Ist die Form rechteckig, so werden die Koordinaten so angegeben: coords="x_linksoben, y_linksoben, x_rechtsunten, y_rechtsunten".
Ist die Form kreisförmig, so werden die Koordinaten wie folgt angegeben: coords="x_mittelpunkt, y_mittelpunkt, pixel_radiuswert".
Ist die Form ein Polygon (ein Vieleck), so werden die Koordinaten wie folgt angegeben: coords="x_p1, y_p1,x_p2, y_p2, ... ,x_pN, y_pN".
Die Angabe aller Koordinaten erfolgt in Pixel.
PS: Die Deutschlankarte ist aus dem Medienarchiv Wikimedia Commons und steht unter der GNU Free Documentation License.
Kategorien
HTML , Step-by-Step1 TrackBacks
Folgende Einträge anderer Blogs beziehen sich auf den Eintrag Online HTML-Kurs (Teil 17): Clientseitige Imagemaps mit dem map- und dem area-Tag
TrackBack-URL dieses Eintrags: http://www.undertec.de/mt-cgi/mt-tb.cgi/253
Morgen beginnt wie bereits hier im Blog angekündigt der Online HTML-Kurs. Diese Seite soll dazu dienen ein Inhaltsverzeichnis zu allen Kursseiten bereitzustellen. Im Laufe der Zeit wird das Inhaltsverzeichnis ergänzt. Jeder Artikel kann kommentier... Mehr
Jetzt kommentieren