Пути к изображению
Пример 1 | Относительный и абсолютный пути к изображению
Путь к изображению может быть относительный и абсолютный.
Возьмем два разных изображения, но с одинаковым названием (picture.jpg), лежащих в разных папках на ТСД. Первое в папке Images установки программы на ТСД, второе в папке Images на флеш накопителе ТСД.
Зададим относительный и абсолютные пути к изображениям.
Относительный путь к изображению Images\picture.jpg <img size="stretch" max>Images\picture.jpg</img> <hr/> Абсолютный путь к изображению \Images\picture.jpg <img size="stretch" max>\Images\picture.jpg</img>
Результат на терминале:
Первое изображение находилось в папке Images установки программы на ТСД (относительный путь), второе в папке Images на флеш накопителе ТСД (абсолютный путь – любое место на ТСД).
Пример 2 | Изображение задано переменной
Чтобы вставлять изображения в виде переменных сначала необходимо их создать. Переменные имеют вид {любое название}=путь к изображению.
После того, как переменная создана, можно вместо пути указывать нужную переменную.
< img size="stretch">{картинка}</img>
Вставка изображения в текст
Пример 1 | Вставка изображения в текст
Существует возможность вставлять изображения в текст. Для этого тег <img>…</img> необходимо размещать в нужном месте текста.
Изображение <img size="stretch" max>Images\picture.jpg</img> вставлено в текст.
Результат на терминале:
Пример 2| Выравнивание текста по отношению к изображению
При вставке изображения в текст, можно задавать выравнивание текста по отношению к изображению (по верху, по центру, по низу). Для этого необходимо указать одно из значений выравнивания.
<img size="stretch" align="top" max>Images\picture.jpg</img> выравнивание текста по верхней границе изображения <img size="stretch" align="center" max>Images\picture.jpg</img> выравнивание текста по центру изображения <img size="stretch" align="bottom" max>Images\picture.jpg</img> выравнивание текста по нижней границе изображения
Если атрибут «align» не прописан, происходит выравнивание по нижнему краю изображения.
Результат на терминале:
Пример 3| Несколько изображений на одной строке с разными выравниваниями
Если на одной строчке вставлено несколько изображений с разными выравниваниями, то весь текст выравнивается по значению заданному у первого изображения.
1 - center <img size="stretch" align="center" max>Images\picture.jpg</img> 2 - bottom <img size="stretch" align="bottom" max>Images\picture.jpg</img>
Результат на терминале:
Вставка изображения в кнопку меню
Пример 1 | Вставка изображения в кнопку меню с ограничением размеров
Для вставки изображения в кнопку меню тег <img>…</img> необходимо размещать в самой кнопке.
<img size="stretch" max max>{картинка1}</img>
В данном примере, мы указали размер области, в которую вставляем изображение, задав максимальную ширину и высоту. Дополнительно задали атрибут «size="stretch"», который увеличит (уменьшит) изображение до этих размеров. Само изображение задано переменной.
Не обязательно указывать оба параметра размеров, можно указать только один (высоту или ширину изображения).
Результат на терминале:
Пример 2 | Вставка изображения в кнопку меню без конкретных заданных размеров
Посмотрим, что будет, если не задавать конкретные размеры области изображения.
<img size="stretch">{картинка1}</img>
Результат на терминале:
Изображение растянулось до максимально возможного размера.
Рекомендуется задавать конкретные размеры области изображения для вставки в кнопку меню, для корректного отображения картинки.
Размеры изображения
Пример 1 | Размер без масштабирования
Чтобы вставить изображение без масштабирования необходимо задать атрибут size ="normal".
<img size ="normal">Images\picture.jpg</img>
Результат на терминале:
Изображение было обрезано, т.к. полностью не уместилось на экране.
Пример 2 | Размер с масштабированием
Чтобы увеличить (уменьшить) размер изображения до размера области вставки, необходимо задать атрибут size ="stretch".
<img size="stretch">{картинка}</img>
Результат на терминале:
Пример 3 | Задание конкретных размеров изображения
Максимальный размер (высоту и ширину) изображения можно указывать в процентах или пикселях. В данном примере у изображения 1 указана максимальная высота в процентах, у изображения 2 указана в пикселях.
1 <img size="stretch" max>{картинка}</img> 2<img size="stretch" max>{картинка}</img>
Результат на терминале:
Если высота или ширина изображения задана в процентах, то на разных терминалах (в зависимости от размеров экрана) размер картинки будет разным.
Прозрачность цвета фона изображения
Пример 1 | Прозрачность цвета фона задается названием цвета
Посмотрим, как работает прозрачность цвета фона изображения. Возьмем одно изображение. В первом случае не будем задавать прозрачность (оригинал), во втором случае добавим прозрачность зеленого цвета фона, задав атрибут «tcolor="Green"».
Оригинал изображения
<img size="stretch" max>{картинка2}</img><hr/>
Добавлен атрибут tcolor="Green"
Прозрачность зеленого цвета фона
<img tcolor="Green" size="stretch" max>{картинка2}</img>
Результат на терминале:
Зеленый цвет в изображении стал прозрачным.
Пример 2 | Прозрачность цвета фона задается кодом цвета
Задать прозрачности цвета фона можно не только написав цвет, но и введя код цвета #000000 (черный).
Оригинал изображения
<img size="stretch" max>{картинка2}</img><hr/>
Добавлен атрибут tcolor="#000000"
Прозрачность черного цвета фона
<img tcolor="#000000" size="stretch" max>{картинка2}</img>
Результат на терминале:
Черный цвет в изображении стал прозрачным.
Пример 3 | Прозрачность цвета фона задается первым пикселем изображения
Кроме задания конкретного цвета прозрачности фона, можно задать прозрачность, указав цвет, взятый у первого пикселя вставляемого изображения с координатами (0,0), добавив атрибут «tcolor="yes"». В данном примере это красный цвет.
Оригинал изображения
<img size="stretch" max>{картинка2}</img><hr/>
Добавлен атрибут tcolor="yes"
Прозрачность цвета фона взятого из первого пикселя картинки (красный)
<img tcolor="yes" size="stretch" max>{картинка2}</img>
Результат на терминале:
Красный цвет в изображении стал прозрачным.
