Map: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Das AOQML-Tag <map> legt eine [http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm Imagemap] an. Somit können Questlinks auf einem Bild abgelegt …“) |
(param Attribut hinzugefügt) |
||
| (11 dazwischenliegende Versionen von 6 Benutzern werden nicht angezeigt) | |||
| Zeile 2: | Zeile 2: | ||
== Syntax == | == Syntax == | ||
| − | <code xml | + | <code xml> |
| − | <map src="" [width=""] [height=""]> | + | <map src="" [width=""] [height=""] [style=""]> |
| − | <go target="" coords="">...</go> | + | <go target="" [param="..."] coords="" [enabled="true|false"]>...</go> |
| + | [<info coords="">...</info>] | ||
</map> | </map> | ||
</code> | </code> | ||
| + | |||
| + | Mittels '''map''' legt man grundsätzlich den Bildbereich fest. Mit Hilfe der '''go'''-Tags gibt man die klickbaren Bereiche an, die zu anderen AOQML-Szenen führen. Mit Hilfe von '''info'''-Tags kann man, wenn gewünscht, Bereich festlegen, bei denen ein Tooltip erscheint, die aber nicht zu einer anderen AOQML-Szene führen. | ||
map-Tag: | map-Tag: | ||
| Zeile 12: | Zeile 15: | ||
* '''width''': Falls das Bild kleiner angezeigt werden soll, kann hier die gewünschte Breite angegeben werden (als Zahlenwert). | * '''width''': Falls das Bild kleiner angezeigt werden soll, kann hier die gewünschte Breite angegeben werden (als Zahlenwert). | ||
* '''height''': Falls das Bild kleiner angezeigt werden soll, kann hier die gewünschte Höhe angegeben werden (als Zahlenwert). | * '''height''': Falls das Bild kleiner angezeigt werden soll, kann hier die gewünschte Höhe angegeben werden (als Zahlenwert). | ||
| + | * '''style''': CSS Style-Angaben um z.B. Layer zu definieren, oder Text um das Bild fließen zu lassen. | ||
go-Tag: | go-Tag: | ||
* '''target''': Der Name der verlinkten Szene | * '''target''': Der Name der verlinkten Szene | ||
| − | * '''coords''': Es werden vier Zahlen angegeben, die ein | + | * '''param''' (optional): Dieser Wert wird der Folgeszene in einer Variable namens "param" im Scope "scene" übergeben. Siehe [[Choice|Choice-Tag]] für weitere Informationen. |
| + | * '''coords''': Es werden vier Zahlen angegeben, die ein Rechteck definieren, z.B. '180,60,265,160'. Dabei bedeuten:<br /> | ||
:x1 = linke obere Ecke, Pixel von links<br /> | :x1 = linke obere Ecke, Pixel von links<br /> | ||
:y1 = linke obere Ecke, Pixel von oben<br /> | :y1 = linke obere Ecke, Pixel von oben<br /> | ||
:x2 = rechte untere Ecke, Pixel von links<br /> | :x2 = rechte untere Ecke, Pixel von links<br /> | ||
:y2 = rechte untere Ecke, Pixel von oben<br /> | :y2 = rechte untere Ecke, Pixel von oben<br /> | ||
| − | + | Wenn man kein '''Rechteck''', sondern ein '''Vieleck''' für den Klickbereich definieren will, kann man auch mehr als vier Zahlen in ''coords'' angeben: x1,y1,x2,y2 ... xn,yn. Es können beliebig viele Ecken angegeben werden. Von der letzten definierten Ecke muss man sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon. | |
| + | * '''enabled''': Standard ist true. Kann auf false gesetzt werden um einen nicht-klickbaren Bereich zu erzeugen und somit zu verstecken. | ||
| + | Wenn zwei oder mehr Felder, die durch <go> gebildet werden, übereinander liegen, wird jeweils die im Code oben stehende Zeile wirksam. Wenn man auf einer Imagemap beispielsweise einen Link "verstecken" möchte kann man zuunterst einen go-Tag definieren, der das ganze Bild abdeckt, aber zu einer ungünstigen oder wertlosen Szene führt. Lediglich die darüber angeordneten Felder führen zu den interessanten Szenen. | ||
== Beispiel == | == Beispiel == | ||
Der folgende Code | Der folgende Code | ||
| − | <code xml | + | <code xml> |
<map src="bilder/dungeons/Weinkeller.png"> | <map src="bilder/dungeons/Weinkeller.png"> | ||
<go target="truhe" coords="388,215,440,265">Truhe ansehen</go> | <go target="truhe" coords="388,215,440,265">Truhe ansehen</go> | ||
| Zeile 36: | Zeile 43: | ||
(die Maus fährt dabei gerade über den Tisch, deshalb wird dort der Tooltip angezeigt):<br /> | (die Maus fährt dabei gerade über den Tisch, deshalb wird dort der Tooltip angezeigt):<br /> | ||
[[Bild:Imagemap-example.jpg]] | [[Bild:Imagemap-example.jpg]] | ||
| + | |||
| + | |||
| + | == Beispiel 2: Info-Tag == | ||
| + | <code xml> | ||
| + | <map src="bilder/dungeons/Weinkeller.png"> | ||
| + | <go target="truhe" coords="388,215,440,265">Truhe ansehen</go> | ||
| + | <go target="ausgang" coords="180,60,265,160">Keller verlassen</go> | ||
| + | <info coords="288,160,350,218">Der Tisch ist leer.</info> | ||
| + | </map> | ||
| + | </code> | ||
| + | Im Unterschied zu Beispiel 1 ist hier der Tisch nicht "klickbar", d.h. es wird keine separate AOQML-Szene aufgerufen, sondern beim Drüberfahren mit der Maus erscheint der Tooltip "Der Tisch ist leer.". | ||
| + | |||
== Beispielquest == | == Beispielquest == | ||
Eine Beispielquest, bei der eine Imagemap verwendet wird (in der Szene ''keller.xml''), kann hier heruntergeladen werden: [[File:Weinkeller.zip]] | Eine Beispielquest, bei der eine Imagemap verwendet wird (in der Szene ''keller.xml''), kann hier heruntergeladen werden: [[File:Weinkeller.zip]] | ||
| + | |||
| + | |||
| + | == Gimp-Vorlage für Dungeons == | ||
| + | Pinsel für Gimp zur Gestaltung eigener Dungeons gibt es hier zum Download: https://wiki.antamar.eu/images/8/8d/Gimp-Dungeon-brushes.zip | ||
| + | |||
| + | == Map und Testserver == | ||
| + | Um eine Dungeonquest ordentlich auf dem Testserver testen zu können, gibt es zwei Möglichkeiten: | ||
| + | |||
| + | # Man legt die Bilder in das ZIP-Archiv und verwendet den Dateinamen, um auf sie zu referieren. | ||
| + | # Man legt die Bilder bei einem externen Bilderhoster oder im Wiki ab und benutzt die vollständige URL, um auf sie zu verweisen. | ||
| + | |||
| + | <code xml n> | ||
| + | <map src="Weinkeller.png"> <!-- Funktioniert wenn sich die Weinkeller.png direkt im ZIP-Archiv auf Ebene der start.xml befindet --> | ||
| + | <map src="http://wiki.antamar.eu/images/f/f3/Imagemap-example.jpg"> <!-- Funktioniert, siehe URL der Grafik oben --> | ||
| + | <map src="Bilder/Weinkeller.png"> <!-- Funktioniert nicht, selbst wenn sich die Weinkeller.png im Unterordner "Bilder" im ZIP-Archiv befindet. Sobald ein Slash im Grafikverweis angegeben ist, sucht die Engine auf dem Antamarserver und nicht mehr im ZIP! --> | ||
| + | </code> | ||
[[Kategorie:AOQML-Tags]] | [[Kategorie:AOQML-Tags]] | ||
| − | |||
Aktuelle Version vom 8. August 2021, 08:30 Uhr
Das AOQML-Tag <map> legt eine Imagemap an. Somit können Questlinks auf einem Bild abgelegt werden.
Inhaltsverzeichnis
Syntax
<map src="" [width=""] [height=""] [style=""]>
<go target="" [param="..."] coords="" [enabled="true|false"]>...</go>
[<info coords="">...</info>]
</map>
Mittels map legt man grundsätzlich den Bildbereich fest. Mit Hilfe der go-Tags gibt man die klickbaren Bereiche an, die zu anderen AOQML-Szenen führen. Mit Hilfe von info-Tags kann man, wenn gewünscht, Bereich festlegen, bei denen ein Tooltip erscheint, die aber nicht zu einer anderen AOQML-Szene führen.
map-Tag:
- src: erwartet eine URL zum Bild, z.B. 'bilder/dungeons/Weinkeller.png'
- width: Falls das Bild kleiner angezeigt werden soll, kann hier die gewünschte Breite angegeben werden (als Zahlenwert).
- height: Falls das Bild kleiner angezeigt werden soll, kann hier die gewünschte Höhe angegeben werden (als Zahlenwert).
- style: CSS Style-Angaben um z.B. Layer zu definieren, oder Text um das Bild fließen zu lassen.
go-Tag:
- target: Der Name der verlinkten Szene
- param (optional): Dieser Wert wird der Folgeszene in einer Variable namens "param" im Scope "scene" übergeben. Siehe Choice-Tag für weitere Informationen.
- coords: Es werden vier Zahlen angegeben, die ein Rechteck definieren, z.B. '180,60,265,160'. Dabei 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
Wenn man kein Rechteck, sondern ein Vieleck für den Klickbereich definieren will, kann man auch mehr als vier Zahlen in coords angeben: x1,y1,x2,y2 ... xn,yn. Es können beliebig viele Ecken angegeben werden. Von der letzten definierten Ecke muss man sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.
- enabled: Standard ist true. Kann auf false gesetzt werden um einen nicht-klickbaren Bereich zu erzeugen und somit zu verstecken.
Wenn zwei oder mehr Felder, die durch <go> gebildet werden, übereinander liegen, wird jeweils die im Code oben stehende Zeile wirksam. Wenn man auf einer Imagemap beispielsweise einen Link "verstecken" möchte kann man zuunterst einen go-Tag definieren, der das ganze Bild abdeckt, aber zu einer ungünstigen oder wertlosen Szene führt. Lediglich die darüber angeordneten Felder führen zu den interessanten Szenen.
Beispiel
Der folgende Code
<map src="bilder/dungeons/Weinkeller.png">
<go target="truhe" coords="388,215,440,265">Truhe ansehen</go>
<go target="tisch" coords="288,160,350,218">Tisch ansehen</go>
<go target="ausgang" coords="180,60,265,160">Keller verlassen</go>
</map>
erzeugt folgende Ausgabe
(die Maus fährt dabei gerade über den Tisch, deshalb wird dort der Tooltip angezeigt):
Beispiel 2: Info-Tag
<map src="bilder/dungeons/Weinkeller.png">
<go target="truhe" coords="388,215,440,265">Truhe ansehen</go>
<go target="ausgang" coords="180,60,265,160">Keller verlassen</go>
<info coords="288,160,350,218">Der Tisch ist leer.</info>
</map>
Im Unterschied zu Beispiel 1 ist hier der Tisch nicht "klickbar", d.h. es wird keine separate AOQML-Szene aufgerufen, sondern beim Drüberfahren mit der Maus erscheint der Tooltip "Der Tisch ist leer.".
Beispielquest
Eine Beispielquest, bei der eine Imagemap verwendet wird (in der Szene keller.xml), kann hier heruntergeladen werden: Datei:Weinkeller.zip
Gimp-Vorlage für Dungeons
Pinsel für Gimp zur Gestaltung eigener Dungeons gibt es hier zum Download: https://wiki.antamar.eu/images/8/8d/Gimp-Dungeon-brushes.zip
Map und Testserver
Um eine Dungeonquest ordentlich auf dem Testserver testen zu können, gibt es zwei Möglichkeiten:
- Man legt die Bilder in das ZIP-Archiv und verwendet den Dateinamen, um auf sie zu referieren.
- Man legt die Bilder bei einem externen Bilderhoster oder im Wiki ab und benutzt die vollständige URL, um auf sie zu verweisen.
<map src="Weinkeller.png"> <!-- Funktioniert wenn sich die Weinkeller.png direkt im ZIP-Archiv auf Ebene der start.xml befindet -->
<map src="http://wiki.antamar.eu/images/f/f3/Imagemap-example.jpg"> <!-- Funktioniert, siehe URL der Grafik oben -->
<map src="Bilder/Weinkeller.png"> <!-- Funktioniert nicht, selbst wenn sich die Weinkeller.png im Unterordner "Bilder" im ZIP-Archiv befindet. Sobald ein Slash im Grafikverweis angegeben ist, sucht die Engine auf dem Antamarserver und nicht mehr im ZIP! -->
