Map: Unterschied zwischen den Versionen
(→Syntax: neu: Polygone/Vielecke für den Klickbereich in coords) |
(→Syntax) |
||
Zeile 21: | Zeile 21: | ||
: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 | + | 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. |
Version vom 15. Juni 2013, 09:14 Uhr
Das AOQML-Tag <map> legt eine Imagemap an. Somit können Questlinks auf einem Bild abgelegt werden.
Syntax
<map src="" [width=""] [height=""] [style=""]>
<go target="" coords="">...</go>
</map>
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.
Innerhalb der umschließenden Klammern von <go>...</go> wird der anzuzeigende Tooltip spezifiziert.
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):
Beispielquest
Eine Beispielquest, bei der eine Imagemap verwendet wird (in der Szene keller.xml), kann hier heruntergeladen werden: Datei:Weinkeller.zip