Map: Unterschied zwischen den Versionen
Neonix (Diskussion | Beiträge) |
|||
| Zeile 2: | Zeile 2: | ||
== Syntax == | == Syntax == | ||
| − | <code xml | + | <code xml> |
<map src="" [width=""] [height=""] [style=""]> | <map src="" [width=""] [height=""] [style=""]> | ||
<go target="" coords="">...</go> | <go target="" coords="">...</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 22: | Zeile 25: | ||
: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. | 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. | ||
| − | |||
| − | |||
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. | 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. | ||
| Zeile 30: | Zeile 31: | ||
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 41: | Zeile 42: | ||
(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 == | ||
Version vom 2. Mai 2014, 14:33 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="" coords="">...</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
- 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.
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
