Цей шаблон дозволяє додавати пояснювальні примітки до зображень у вигляді справжнього тексту (який також може містити й посилання), що, як правило, є виразнішим за текст, вбудований до зображення — особливо якщо зображення зменшено до розміру ескізу.
Інші застосування включають обрізку зображення для виключення неважливих частин та, можливо, збільшення важливих, та інтернаціоналізації, оскільки нотатки можна змінювати, не змінюючи зображення.
Цей шаблон та {{annotated image 4}} є єдиними шаблонами зображень з нотатками, що застосовують {{annotation}} для накладання вікітексту на зображення.
Альтернативний текст для людей, чиє бачення зображень є погіршеним (див. ВП:ALT[en]).
абоimage абоimagemap
чинне ім'я файлу зображенняaабо чинна карта зображень X/HTML
Вказуйте або image, або imagemap, але не обидва.
width
додатне ціле
–
Загальна ширина (у пікселях) рамки, що містить зображення та нотатки. Мусить бути не менше зображуваної ширини зображення (що може бути встановлено застосуванням image-width).
height
додатне ціле
–
Загальна висота (у пікселях) рамки, що містить зображення та нотатки. Мусить бути не менше зображуваної висоти зображення. Якщо ширину відображення зображення змінено вказанням image-width, то висота відображення зображення та додаткові «поля» для нотаток потребуватимуть обчислення.
image-left
ціле
(нуль)
X-координата верхнього лівого кута зображення (в пікселях) відносно верхнього лівого кута рамки, що містить зображення та нотатки. Від'ємні значення обрізають зображення.
image-top
ціле
(нуль)
Y-координата верхнього лівого кута зображення (в пікселях) відносно верхнього лівого кута рамки, що містить зображення та нотатки. Від'ємні значення обрізають зображення.
image-width
додатне ціле
Ширина зображення (у пікселях).
annotations
Нотатки для зображення. Можуть залишатися порожніми (наприклад, |... |annotations= |...) з метою лише обрізання зображення.
float
right
left
none
right
Для вказання, чи плаває шаблон праворуч чи ліворуч від сусіднього вмісту, чи ні.
Додатковий CSS, що застосовується до найбільш зовнішньої рамки. Не анулює жодних інших параметрів, вказаних для найбільш зовнішньої рамки (тобто, найкраще застосовувати як «останній засіб»).
image-bg-color
будь-який чинний колір CSS
white
Тло рамки, в якій відображається зображення. Наприклад, темне тло для відносно темного зображення на якому розміщено відносно світлі нотатки.
image-css
будь-який чинний CSS
–
Додатковий CSS, що застосовується до (внутрішньої рамки, що містить) зображення. Не анулює жодних інших параметрів, вказаних для цієї рамки (тобто, найкраще застосовувати як «останній засіб»).
annot-text-align
left
right
center
left
Встановлює стандартне вирівнювання тексту для всіх вміщених нотаток. Може бути замінений для кожної нотатки.
annot-background-color
будь-який чинний колір CSS
transparent
Встановлює стандартний колір тла для всіх вміщених нотаток. Може бути замінений для кожної нотатки.
Цей шаблон спрощує інтернаціоналізацію; текст одразу відділено від зображення, тому просто перекладати текст, якщо необхідно, переміщувати частини тексту, оскільки довжини того ж тексту в різних мовах можуть сильно відрізнятися.
Пастка
Існує одна одна пастка, хоча вона здебільшого стосується правильного використання одного браузера (звісно, це Microsoft Internet Explorer). Internet Explorer має два способи масштабування тексту для підвищення читабельності:
Зміна розміру тексту, що присутня в меню View Internet Explorer'а, впливає на текст, але не на зображення. Цей метод може розривати зображення з нотатками, оскільки текст масштабується, а графічний вміст та рамка — ні. Firefox та Opera не застосовують цей механізм.
Збільшення масштабує і зображення, як і текстові нотатки, і відтак не розриває відносних розмірів та положень нотаток у зображенні. Netscape та його похідні Mozilla, Firefox та Opera мали масштабування роками, і воно є зручнішим, оскільки воно також масштабує текст, реалізований як частина зображення, наприклад, як у логотипі Вікіпедії. Клавіатурні послідовності керування збільшенням (CTRL + для збільшення, CTRL - для зменшення) є однаковими у Firefox, Opera та Internet Explorer. У Firefox та Opera існують також пункти меню для масштабування, що показують керівні клавіатурні послідовності. В Internet Explorer 7 в меню присутня лише зміна розміру тексту; щоби навчитися масштабування, користувач мусить подивитися якесь зовнішнє джерело.
Це зображення має фактичну ширину 300 пікселів (як збережено у Вікіданих), але це не має значення при застосуванні цього шаблону.Всі вимірювання відносні до image-width, віртуальної ширини, що ви надали зображенню (в цьому прикладі: 2000 пікселів)
Ви можете зробити це за допомогою наступного коду:
{{Annotated image
| image = Mona Lisa color restoration2.jpg
| image-width = 2000 <!-- оберіть будь-яку ширину, яка вам подобається. Фактична ширина зображення не має значення-->
| image-left = −850 <!-- обріжте ліву частину. Зверніть увагу на символ мінуса «-» -->
| image-top = -800 <!-- обріжте верхню частину. Зверніть увагу на символ мінуса «-» -->
| width = 250 <!-- обріжте праву частину. Це буде шириною зображення у статті -->
| height = 250 <!-- обріжте нижню частину. Це буде висотою зображення у статті -->
| float = left
| annotations = <!-- порожній чи ні, цей параметр мусить бути включеним -->
| caption = Обрізана Мона Ліза із зображення в 2000 пікселів
}}
Результатом є область 250×250 пікселів із зображення завширшки 2000 пікселів (фактична ширина зображення не має значення). Верхні 800 пікселів та 850 пікселів з лівого боку 2000-піксельного зображення «відкинуто», так само як і «залишок» з правого боку після 250 пікселів та внизу після 250 пікселів:
Обрізана Мона Ліза із зображення в 2000 пікселів
Підсторінки (шаблони на базі цього шаблону)
Цей перелік породжується та оновлюється автоматично. Перенаправлення показано курсивом.
{{Overlay}}, що робить помітки на зображенні, автоматично будує стовпчиково-збалансовані умовні позначення з, якщо потрібно, підпозначеннями; допускає окреме керування спливними підказками поміток; допомагає у визначенні координат для положень поміток; тощо.