Багатошарові зображення
Для створення багатошарового зображення використовується тег розмітки [layers]:
[layers]<>
[picture]map.png[/picture]<>
[picture x=2000 y=650]castle.png[/picture]<>
[picture x=600 y=250]castle.png[/picture]<>
[picture x=2700 y=3150]castle.png[/picture]<>
[picture x=1361 y=2231]swordman.png[/picture]<>
[/layers]
Перший тег [picture] всередині тега [layers] є фоном. Фон автоматично масштабується до розміру екрана. Зображення, використані в інших тегах [picture] також будуть пропорційно масштабовані.
Атрибути x та y в інших тегах [picture] визначають координати зображення відносно верхнього лівого кута фонового зображення. Їхні значення мають бути задані в пікселях. Якщо вони не вказані, використовуються координати 0,0.
Шари зображень
Тег розмітки [layers] має такі атрибути:
| Атрибут | Опис |
|---|---|
width=50% | Встановлює ширину багатошарового зображення. |
leftmargin=0.5em | Встановлює ширину поля ліворуч. |
rightmargin=0.5em | Встановлює ширину поля праворуч. |
Тег розмітки [picture] всередині тега розмітки [layers] має такі атрибути:
| Атрибут | Опис |
|---|---|
x=10 | Задає координату X відносно верхнього лівого кута фонового зображення. Якщо не вказаний, використовується 0. |
y=22 | Задає координату Y відносно верхнього лівого кута фонового зображення. Якщо не вказаний, використовується 0. |
to="Текст вибору" | Якщо встановлений, натискання на це зображення призводить до вибору відповідного варіанту. |
onclick=inkFunction | Якщо встановлений, натискання на це зображення призводить до виклику вказаної функції Ink. |
display=modal | Якщо встановлений, виклик функції Ink відображає модальне вікно оверлею замість повноекранного. |
Для фонового зображення значення цих атрибутів ігноруються.
Активні області
Активні області на зображенні, при натисканні на яких буде зроблено вибір або викликана функція, також можна задати за допомогою тега розмітки [area]. Атрибути цього тега такі самі, як і у [picture], але треба задати розмір активної області за допомогою атрибутів x, y, width, height (координати верхнього лівого кута та розмір області) або x, y, x1, y1 (координати верхнього лівого та нижнього правого кутів області).
| Атрибут | Опис |
|---|---|
x=10 | Задає координату X верхнього лівого кута області відносно верхнього лівого кута фонового зображення. |
y=22 | Задає координату Y верхнього лівого кута області відносно верхнього лівого кута фонового зображення. |
x1=110 | Задає координату X нижнього правого кута області відносно верхнього лівого кута фонового зображення. |
y1=122 | Задає координату Y нижнього правого кута області відносно верхнього лівого кута фонового зображення. |
width=100 | Задає ширину активної області. |
height=100 | Задає висоту активної області. |
to="Текст вибору" | Якщо встановлений, натискання на цю область призводить до вибору відповідного варіанту. |
onclick=inkFunction | Якщо встановлений, натискання на цю область призводить до виклику вказаної функції Ink. |
display=modal | Якщо встановлений, виклик функції Ink відображає модальне вікно оверлею замість повноекранного. |
Приклад:
[layers]<>
[picture]map.png[/picture]<>
[area x=369 y=2669 width=512 height=512 onclick=inkFunction]<>
[area x=2261 y=2531 with=300 height=100 onclick=otherInkFunction display=modal]<>
[area x=123 y=987 width=110 height=222 to="Choice Text"]<>
[area x=123 y=987 x1=223 y1=1200 to="Choice Text 2"]<>
[/layers]