Теперь пора попробовать применить все эти теоретические сведения на практике. Давайте напишем для пробы небольшой HTML-файл, вызывающий один из органов управления ActiveX, разработанных фирмой Microsoft, - модуль для создания плавного перехода цветов (градиента). Заглянув в документацию на этот компонент, мы узнаем соответствующий ему идентификатор CLSID и URL-адрес одной из его копий на сервере Microsoft, на которую можно будет сослаться. Кроме того, там же мы найдем список параметров и их значений, которые способен принимать этот орган управления, в частности:
StartColor и EndColor
Два цвета, плавный переход между которыми вы увидите на экране. Задаются в обычном для HTML виде "#rrggbb", где rr, gg и bb - шестнадцатеричные значения красной, зеленой и синей составляющих цвета.
Direction
Направление градиента: 0 - горизонтальное, 1 - вертикальное, 2 - радиальное от центра к краям, и т.д.
Теперь остается лишь заполнить атрибуты тега
<html> <body> Этот градиент на вид не отличишь от обычного графического файла: <object ID="grad1" CLASSID="clsid:017C99A0-8637-11CF-A3A9-00A0C9034920" CODEBASE="http://activex.microsoft.com/controls/ iexplorer/iegrad.ocx#Version=4,70,0,1161" WIDTH=200 HEIGHT=100 > <param NAME="StartColor" VALUE="#ffffff"> </param> <param NAME="EndColor" VALUE="#000000"> </param> <param NAME="Direction" VALUE="0"> </param></object> </body> </html>
Открытие этого файла в броузере Internet Explorer приведет к довольно заметной паузе, во время которой в строке состояния будет видна надпись "Installing components..." В это время броузер связывается с сервером, указанным в атрибуте CODEBASE, и перекачивает с него файл, содержащий компонент ActiveX (перед проведением этого эксперимента нужно подключиться к сети). Файл этот не слишком велик, но и не так чтобы очень мал - чуть больше 100 K (что, кстати, вполне можно принять за средний размер для не слишком сложных органов управления). То, что вы увидите на экране, когда инсталляция будет закончена, показано на рис. 2.
Рисунок 2. Пример вызова органа управления ActiveX
Конечно, для простого статичного градиента вполне можно было бы обойтись обычным gif-файлом, не прибегая к ActiveX. Главное преимущество органов управления - это их интерактивность и возможность динамически изменять их параметры. Давайте попробуем оживить наш градиент, а заодно попрактикуемся в организации взаимодействия между органами управления и сценариями.
Выделим на странице небольшую квадратную область и заполним ее градиентом типа "от центра к краям". Цвет краев выберем серым, а цвет центра будем динамически менять из черного в белый и обратно, создавая эффект "мигающей лампочки". Вызов градиента в этом примере запишем так:
<object ID="grad1"
CLASSID="clsid:017C99A0-8637-11CF-A3A9-00A0C9034920"
CODEBASE="http://activex.microsoft.com/controls/
iexplorer/iegrad.ocx#Version=4,70,0,1161"
WIDTH=25
HEIGHT=25
<!- прямоугольник 25 на 25 пикселов ->
>
<param NAME="StartColor" VALUE="#888888">
< ! - по краям - серый цвет ->
</param>
<param NAME="EndColor" VALUE="#000000">
< !- в середине - то черный, то белый ->
</param>
<param NAME="Direction" VALUE="2">
< !- направление - от центра к краям ->
</param></object>
(Градиент больших размеров, чем 25 на 25 пикселов, перерисовывается слишком долго.) Если вы выполнили предыдущий пример и теперь этот орган управления загружен и установлен на ваш компьютер, атрибут CODEBASE можно опустить.
Теперь нужно обеспечить периодический вызов функции, которая меняла бы одно из свойств нашего градиента - цвет центральной точки. Для этого воспользуемся еще одним органом управления под названием Timer. Согласно документации, этот орган управления имеет два параметра: параметр Interval, который задает промежуток времени между срабатываниями таймера, и параметр Enabled, позволяющий включать и выключать работу таймера. "Срабатывание" же таймера заключается в инициировании связанного с ним события, которое так и называется - Timer. Как выражаются программисты, мы должны теперь "повесить" функцию переключения градиента на это событие. Сначала заведем объект-таймер:
<object ID="timer1"
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/
iexplorer/ietimer.ocx#Version=4,70,0,1161"
>
<param NAME="Interval" VALUE="500">
< !- таймер срабатывает каждые 0,5 сек ->
</param>
<param NAME="Enabled" VALUE="True">
< !- таймер включен ->
</param></object>
Теперь остается написать фрагмент сценария, у которого в открывающем теге
О сайте
Постоянные ссылки
При копировании ссылка на TeaM RSN обязательна!
Оставить комментарий
Вы должны войти, чтобы оставить комментарий.