Bücher online kostenlos Kostenlos Online Lesen
HTML5-Handbuch - die neuen Features von HTML5

HTML5-Handbuch - die neuen Features von HTML5

Titel: HTML5-Handbuch - die neuen Features von HTML5 Kostenlos Bücher Online Lesen
Autoren: Franzis
Vom Netzwerk:
Grafiken, bei denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Auf diese Weise kann der Anwender in einigen Fällen wesentlich intuitiver und schneller zu Information gelangen als durch lange verbale Verweislisten.
Beispiel
    

Schnell zur Stadt oder Region Ihrer Wahl!


    


        alt="Karte" usemap="#Landkarte">
    
        href="http://www.koblenz.de/" alt="Koblenz">
        href="http://www.wiesbaden.de/" alt="Wiesbaden">
        href="http://www.mainz.de/" alt="Mainz">
        href="http://www.frankfurt.de/" alt="Frankfurt">
        href="http://www.mannheim.de/" alt="Mannheim">
        href="http://www.heidelberg.de/" alt="Heidelberg">
        href="http://www.wuerzburg.de/" alt="Würzburg">
        href="http://www.bamberg.de/" alt="Bamberg">
        href="http://www.nuernberg.de/" alt="Nürnberg">
        href="http://www.karlsruhe.de/" alt="Karlsruhe">
        href="http://www.heilbronn.de/" alt="Heilbronn">
        href="http://www.stuttgart.de/" alt="Stuttgart">
        href="http://www.ulm.de/" alt="Ulm">
        href="http://www.augsburg.de/" alt="Augsburg">
        href="http://www.baden-aktuell.de/" alt="Baden">
    

    


Erläuterung
    Das Beispiel enthält eine Grafik mit einem Kartenausschnitt von Süddeutschland. Die Grafik wird so verweissensitiv gemacht, dass die größeren Städte auf der Karte anklickbar sind. Die Links führen zu den jeweiligen Städte-Portalen im Internet.
    Eine Grafik, die verweissensitive Flächen enthalten soll, referenzieren Sie wie gewohnt mit Hilfe des

-Tags. Um die Grafik als verweissensitiv zu kennzeichnen, notieren Sie im

-Tag das Attribut
usemap
. Dieses Attribut erwartet als Wertzuweisung eine URL-Adresse. Mit
#
und einem Namen wird ein Ankername im gleichen Dokument referenziert, was eine gültige URL-Adresse ist.
    Der Anker ist ein
map
-Element. Dieses Element wird durch



markiert, der dann durch

referenziert werden kann. Beim
name
-Attribut vergeben Sie einen Namen für die verweissensitive Grafik. Vergeben Sie keine zu langen Namen. Der Name darf keine Leerzeichen enthalten. Am sichersten ist es, wenn Sie sich beim Namen auf Buchstaben von a bis z, die Ziffern 0 bis 9 und den Unterstrich (_) beschränken.
    Ein
map
-Element können Sie überall im Dokument notieren, wo Sie auch gewöhnlichen Text notieren können. Es empfiehlt sich, das Element an einer markanten, gesonderten Stelle zu notieren, z. B. am Anfang oder am Ende des Dokumentkörpers. Es spielt keine Rolle, ob das <
img>
-Tag vor oder hinter dem
map
-Element steht, zu dem es mit
usemap
eine Verbindung herstellt. Das
map
-Element erzeugt selbst keine Bildschirmausgabe.
    Zwischen dem einleitenden

und dem abschließenden

definieren Sie die verweissensitiven Bereiche für die Grafik. Dazu dient das

-Tag. Folgende Bereichstypen können Sie darin definieren:
•   Mit

oder

bestimmen Sie eine viereckige Fläche (Rechteck).
•   Mit

oder

bestimmen Sie einen Kreis.
•   Mit

oder

bestimmen Sie einen Bereich mit beliebig vielen Eck-Koordinaten.
    Beim Attribut
coords
geben Sie die Koordinaten der verweissensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweissensitiv sein soll. Trennen Sie alle Pixelwerte durch Kommata.
    Ein Viereck (
shape="rect"
,
shape="rectangle"
) definieren Sie mit den Koordinaten für
x1,y1,x2,y2
, wobei diese bedeuten:
•   
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

Weitere Kostenlose Bücher