Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

verweis-sensitive Grafiken

Ähnliche Präsentationen


Präsentation zum Thema: "verweis-sensitive Grafiken"—  Präsentation transkript:

1 verweis-sensitive Grafiken
Verweis-sensitive Grafiken sind Grafiken, in 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.

2 Quelltext

3 <MAP> Mit <map name="[Name]"> leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein. Beim name-Attribut vergeben Sie einen Namen für die verweis-sensitive Grafik. Dieser Name muss nichts mit dem Dateinamen der Grafik zu tun haben. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).

4 Zwischen dem einleitenden <map...> und dem
abschließenden </map> definieren Sie die verweis- sensitiven Flächen. Mit <area...> definieren Sie einzelne verweis-sensitive Flächen einer bestimmten Grafik, die Sie an einer anderen Stelle einbinden.

5 Ein Viereck (shape="rect") definieren Sie mit den Koordinaten für x1,y1,x2,y2 wobei 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 oben

6 Einen Kreis (shape="circle") definieren Sie mit den Koordinaten für x,y,r wobei bedeuten: x = Mittelpunkt, Pixel von links y = Mittelpunkt, Pixel von oben r = Radius in Pixel

7 Ein Polygon (shape="poly") definieren Sie mit den Koordinaten x1,y1,x2,y2 ... xn,yn wobei bedeuten: x = Pixel einer Ecke von links y = Pixel einer Ecke von oben Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.

8 Mit dem <alt>-Attribut notieren Sie Alternativtext für den Fall, dass die verweis-sensitive Fläche nicht angezeigt werden kann. Dieses Attribut ist ein Pflichtattribut, d.h. Sie müssen es notieren, um gültiges HTML zu erzeugen. Den Text den mal als Wert in das <alt>-Attribut einfügt, wird in einem kleinen gelben Fenster neben dem Mauszeiger angezeigt, wenn man mit der Maus über dem Bereich ist.

9 Kleiner Javascript Sie können durch einen kleinen Javascript eine Fehlermeldung erzeugen, die beim klicken auf einen Bereich erscheint. Sie können den Text der Fehlermeldung frei definieren.

10 Der Javascript <script language=javascript>
function fehlermeldung() {alert(„Text, der angezeigt werden soll") } </script> Dieser Javascript wird in den <HEAD> teil des HTML Dokuments eingefügt.

11 Verweis auf Javascript
Man definiert genauso einen Bereich, wie zuvor. <map name="[Name des Bildes, gleich wie im <img>]"> <area shape="[rect | circle | poly]" coords="[Koordianten durch [,] abgetrennt]" alt="[Beschriebung]„ onClick=„fehlermeldung()“> </map> <img src="[Bildname]" alt="[Beschriebung]" usemap="#[Name des Bildes]"> Fügt jedoch in den <area> TAG das Attribut onClick=„Name der Funktion()“ ein.

12 © Made by Michael Klenk ®


Herunterladen ppt "verweis-sensitive Grafiken"

Ähnliche Präsentationen


Google-Anzeigen