best-of-best.narod.ruВ статье идёт речь о формате картинок xbm Формат xbm
это черно-белая битовая графика, 1 бит/пиксель - для каждого пикселя существует только два варианта или он черный, или он белый. Два образца таких рисунков представлены сверху. Серые цвета в первом образуются с помощью более или менее плотного расположения чёрных пикселей. Увидеть эти картинки можно только в опере или в Internet Explorer и не старше 6.0SP1 (про другие браузеры не знаю)
Как написать картинку xbm Возьмём такую картинку (13 пикселей в ширину и 3 пикселя в высоту):
Запишем её в таком виде:
(чёрному цвету соответствует единица)
1
0
1
0
1
0
1
1
1
0
1
1
1
1
0
1
0
1
0
1
0
1
0
1
0
1
1
1
1
1
1
0
1
1
1
0
1
0
1
Чтобы количество чисел в каждой строчке было кратно восьми, допишем с право нули (или единицы или и то и другое, на результат это не повлияет):
1
0
1
0
1
0
1
1
1
0
1
1
1
0
0
0
1
0
1
0
1
0
1
0
1
0
1
0
1
0
0
0
1
1
1
1
1
0
1
1
1
0
1
0
1
0
0
0
Запишем их так:
10101011 10111000
10101010 10101000
11111011 10101000
Рассмотрим первые восемь цифр первой строчки: 10101011 Сделаем их зеркальное отражение (первая цифра станет последней, последняя первой):
10101011
^ 11010101 Переведём отражённое число 11010101 в шестнадцатеричный вид, получим: d5 Получить отражённое число можно набрав его с клавиатуры в окошечке и нажав кнопку" Отразить", а узнать, какому числу в двоичной системе соответствует какие число в шестнадцатеричной системе можно нажав кнопку "Перевести >"
ab
Следующие восемь цифр первой строки после такой же обработки превратятся в: 1d Вся первая строчка превратится в d5 1d Поставим перед каждым из этих чисел 0x, получим: 0xd5 0x1d Проделаем то же с другими строчками, получим: 0xd5 0x1d
0x55 0x15
0xdf 0x15 Запишем полученное в таком виде:
#define Name_width 13
#define Name_height 3
static unsigned char Name_bits[] = {
0xd5, 0x1d,
0x55, 0x15,
0xdf, 0x15 };
Вставим в блокнот и сохраним как Name.xbm Name - произвольное имя рисунка (Можно не писать)
Name_width 13 - ширина 13 пикселей
Name_height 3 - высота 3 пикселя
Элементы вида 0xd5 могут располагаться и в одну строку, количество пробелов между ними как и переносы строк в любом месте не имеют значения
Программа для создания картинок xbm
Откроем программой ArtIcons Pro нужную картинку
Файл > Сохранить как
В поле "Имя файла" пишем любое имя
В поле "Тип файла" выбираем "xBitMap(*.xbm)"
Во всплывающем окне ставим нули > OK
Будет создано два файла: "Name.xbm" и "Name.xbm.mask"
Открываем блокнотом файл "Name.xbm.mask" и копируем из него всё содержимое
Открываем блокнотом файл "Name.xbm" и вставляем в него вместо всего то, что в буфере обмена (файл "Name.xbm.mask" после этого можно удалить)
В файле "Name.xbm" будет примерно следующее:
Удалив слово const получим рисунок xbm Можно удалить и всё, помеченное синим и name
Удалив всё лишнее получим:
#define _width 27
#define _height 7
static unsigned char _bits[] = {
0x00,0x82,0x08,0xC8,0x01,0x45,0x50,0xF8,0xA2,0x28,0x22,0xF8,
0x54,0x45,0x55,0xF8,0x88,0xA2,0x88,0xF8,0x50,0x14,0x04,0x7D,
0x20,0x08,0x02,0x7A};
Как увидеть картинку xbm Вставим в блокнот и сохраним как qq.html приведённый ниже код:
<img src="Name.xbm" border=0 width=300>
Если файл рисунка Name.xbm и страница qq.html лежат в одной папке, то открыв её мы увиди на ней наш рисунок, увеличенный в триста раз (чтобы увидеть его в истинном размере, нужно убрать width=300 Ограничения: страницу qq.html нужно открыть в опере или в Internet Explorer и не старше 6.0SP1 Другой вариант увидеть эту картинку открыть её программой, поддерживающей формат xbm, например ArtIcons Pro Внедрение xbm на страницу html Графические изображения формата xbm можно встроить внутрь html страницы средствами javascript - если задать код рисунка xbm как переменную в скрипте с последующим ее вызовом через тег <img> методом javascript:
<script language="javascript">
x = '#define _width 16 \n #define _height 16 \n static char _bits[] { 0xff, 0xff, 0x01, 0x80, 0xfd, 0xbf, 0x05, 0xa0, 0xf5, 0xaf, 0x15, 0xa8, 0xd5, 0xab, 0x55, 0xaa, 0x55, 0xaa, 0xd5, 0xab, 0x15, 0xa8, 0xf5, 0xaf, 0x05, 0xa0, 0xfd, 0xbf, 0x01, 0x80, 0xff, 0xff, };';
</script>
<img src="javascript:x"> Вот результат:
Рисунок внедренный в страницу таким образом отображается только в Internet Explorer Внедренный рисунок нельзя сохранить обычным способом - как рисунок
Раскрашивание xbm с помощью DHTML и CSS Internet Explorer отображает рисунок xbm, не черно-белым, а черно-прозрачным - вместо белого отображается цвет фона. А кроме того, используя фильтры DHTML и CSS рисунок xbm можно "раскрасить".
Можно получить черный с любым цветом (возможно применение фонового рисунка):
<img src="..." style="background: 0000ff;">
с использованием фильтра Invert - белый с любым цветом:
<img src="..." style="filter: Invert; background: ffff00;">
задать прозрачность:
<img src="..." style="filter: Alpha(opacity=45);">
Вот пример:
Посмотреть как работает xbm можно ниже. В длинной строчке появляется код рисунка размером 16 на 5 пикселей набранного галочками после нажатия кнопки "=" Снизу появляется набранный рисунок (только в Internet Explorer не старше 6.0SP1)