Загрузить! И побыстрее!.. |
|
Рыбников Александр
Следует отметить ту печальную истину, что существует немало графических элементов, которые весьма трудно оптимизировать без потери качества. При этом речь идёт не только о фотографиях, для которых существует множество способов прямой или косвенной оптимизации. Наглядным примером подобной графики являются и различного вида диаграммы, которые средствами стандартного HTML создать невозможно. Однако в некоторых случаях возникает задача, например, разместить на одной из странц сайта несколько круговых диаграмм. Как бы Вы их не ужимали с помощью gif-а, у Вас всё равно вес страницы неизбежно может увеличиться килобайт на 50-100, что по понятным причинам может привести к весьма печальным последствиям относительно посещения данной странички. И тут Вы можете задуматься о том, как было бы здорово, если бы такую диаграмму можно было бы нарисовать с помощью старого доброго HTML. Такая возможность в некотором смысле существует. Для примера мы создадим две диаграммы (прямоугольную и круговую) исключительно с помощью кода. Правда, работать это будет исключительно в Internet Explorer, но и диаграмма тоже будет тематической - она будет показывать рейтинг популярности основных броузеров. 1.Создание прямоугольной диаграммы. Для её создания мы будем использовать элемент управления Structured Graphics. Он позволяет строить различные графические объекты (дуги, секторы, прямоугольники, круги и т.п.) с помощью различных методов. Идентификатор класса элемента управления Structured Graphics равен 369303C2-D7AC-11D0-89D5-00A0C90833E6. Он используется в теге <object>. Для построения различных геометрических фигур применяется тег <param> с именем вида LineXXXX и со значением равным свойству или методу. Для построения первой фигуры параметр NAME равен Line0001, для второй - Line0002 и т.д. Прямоугольную диаграмму мы будем создавать с помощью метода Rect(), имеющего следующий синтаксис: Rect(Х1, У1, Х2, У2, R) - где: Для того, чтобы в полученный прямоугольник вписать текст, необходимо вызвать метод Text(), имеющий синтаксис: Text('text', X, Y, R). Приведём необходимые фрагменты кода: Работающий вариант Вы можете увидеть здесь. 1.Создание круговой диаграммы. Для создания круговой диаграммы нам потребуется ещё два метода: Oval(X, Y, W, H, R) - метод, создающий
эллипс, где: Pie(X, Y, W, H, R1, R2, R) - метод,
создающий, сектор круга, где: <PARAM NAME="Line0010" VALUE="Pie(-75, -75, 80, 80, 0, 55, 240)"> Работающий вариант Вы можете посмотреть здесь. Важно отметить, что, элемент управления Structured Graphics даёт куда больше возможностей, чем просто рисование диаграмм различного вида. Он включает в себя множество других методов, таких, как создание замкнутой сплайновой кривой, градиентная заливка, создание прямоугольника с закруглёнными углами и т.п. Но об этих возможностях мы, возможно, расскажем в последующих номерах журнала. Удачного творчества! |
|
|