- Энциклопедия создания сайтов для начинающих. Создание и поддержка New Web-Masters Club.

Стандартные события

ОБРАТИТЕ ВНИМАНИЕ: события для некоторых HTML элементов , которые описаны здесь поддерживаются некоторыми версиями Netscape и более поздними версиями Internet Explorer Чтобы использовать браузер v4. 0 создавая сценарии, удостовертесь, что ваши потенциальные клиенты используют требуемую версию браузера, или они были перенанаправлены соответственно на нужную страницу.

onclick

Событие   onclick   может использоваться, чтобы выполнить функции сценария, когда пользователь нажимает на специфический элемент. Internet Explorer 4.0 поддерживает это событие почти для всех HTML элементов, в то время как Netscape и более ранние версии Internet Explorer поддерживают это только в некотрых элементах (типа links, image map и т.д.). См. порядок событий onmouse* для деталей .

ondblclick

Cобытие  ondblclick   происходит, когда пользователем осуществляются двойные щелчки на специфическом элементе (почти все элементы для Internet Explorer 4.0). Например, следующая ссылка не отвечает на одиночно нажимание - нормальным способом, но двойное нажатие направляет к новому документу.

Это событие для Internet Explorer 4.0 и выше и Netscape 4.0 и выше.

Netscape 3.0 полностью поддерживает onclick событие и , но не поддерживает ondblclick событие, поэтому для пользователей Netscape 3.0 , ссылка будет полностью мертва. Пользователи Internet Explorer 3. 0x получили бы ошибку создания сценария.

 <A HREF="other_page.htm" onclick="javascript:return false" ondblclick="self.location.href ='other_page.html'">ссылка</A>

Попробуйте (обратите внимание, что ссылка не будет направлять куда-нибудь, даже на двойном нажатии, но представит сообщение ).

ссылка-пример

Обратите внимание, что используются системные параметры настройки мыши, чтобы определить различие между одиночным и двойным щелчком.

ondragstart

Иногда, пользователь пытается перетащить элемент, куда-нибудь в другое место. Как простой пример, следующий текст ссылки изменится, когда вы попытаетесь перетащить ссылку.

Попробуйте: Drag me

Обратите внимание: С целью этого примера, заданное по умолчанию действие перемещения было отменено. Нормальное действие должно было бы загрузить документ, вызванный ссылкой .

onhelp

Cобытие  onhelp   обратите внимание, что объект должен в настоящее время быть выделенным. Простой пример, следующая ссылка отвечает только на двойное нажатие (см.  ondblclick  выше), и обеспечивает сообщение 'справки' озадаченному пользователю, который один раз нажимает ссылку ( в том случае если он нажимает клавишу F1 что бы получить ответ почему ничего не произошло после нажатия на ссылку).

<A HREF="other_page.htm" LANGUAGE="Javascript" onclick="return false" onhelp="alert ('Дважды нажмите на ссылку, что бы открыть документ.');return false" ondblclick="self.location.href= 'other_page.htm'">ссылка</A>

Попробуйте: Ссылка-пример

onkeydown

Cобытие  onkeydown  Используется при нажатии и держании клавиши.

onkeypress

Cобытие  onkeypress Используется при нажатии клавиши.

onkeyup

Cобытие  onkeyup Используется при отпускании клавиши.

KeyCode

ВНИМАНИЕ: свойство KeyCode  содержит символ клавиши (UNICODE) , которая была нажата, чтобы заставить события  onkeypress  ,   onkeydown   или   onkeyup   работать.

onmousedown

Cобытие  onmousedown , когда пользователь нажимает кнопку на мыши.
См. порядок событий onmouse* для деталей .

onmousemove

Событие onmousemove  происходит всякий раз, когда мышь пользователей перемещается поверх некоторого места в документe. Обратите внимание, при исполнении события onmousemove  , необходимо отменить так называемое событие bubbling , чтобы все работало правильно. Например, рассмотрите:

 <P onmousemove="top.status='Обычный текст.'">Вот например немного <EM onmousemove="top.status='КУРСИВ.'">курсивчиком </EM> написано</P>

Здесь строка состояния будет подразумевать, что мышь перемещается только поверх содержания элемента <P>. Поэтому делаем так:

 <P onmousemove="top.status='Обычный текст.'">Вот например немного <EM onmousemove="top.status='КУРСИВ.';
self.event.cancelBubble=true"> курсивчиком </EM> написано</P>

Попробуйте - вторая строка отменяет событие bubbling:

Вот например немного курсивчиком написано

Вот например немногокурсивчиком написано

onmouseout

Cобытие  onmouseout  стартует , когда мышь пользователей оставляет область, определенную элементом. См. порядок событий onmouse*

onmouseover

Cобытие  onmouseover  стартует , когда мышь пользователей входит в область, определенную элементом.

onmouseup

Cобытие  onmouseup  может использоваться, чтобы выполнить функции сценария после того, как мышь пользователей была нажата и отпущена - противоположность события  onmousedown . порядок событий onmouse*

onselectstart

Cобытие  onselectstart  исполняется всякий раз, когда пользователь начинает выбирать некоторый текст, который является содержанием элемента. Например, выбор любого из текста в белом параграфе ниже заставляет изменяться его стиль.

Выбор любого элемента из этого текста заставит изменять его цвета ... иногда дико

Порядок событий onmouse*

Здесь представлена последовательность выполнения событий.

Следующие события мыши, для которых не требуется щелчок любых кнопок мыши, происходят в таком порядке:

onmouseover
onmousemove
onmouseout

Для мышкиных событий связанных с нажатием кнопки порядок следующий:

onmouseover
onmousemove
onmousedown
onmouseup
onclick
ondblclick
onmouseout

Так что любые функции сценария, выполненные событиями  onmousedown  или  onmouseup  произошли бы перед событиями  onclick  или  ondblclick  .


- Энциклопедия создания сайтов для начинающих. Создание и поддержка New Web-Masters Club.

Стандартные методы

Ниже перечисленные методы поддерживаются Internet Explorer`ом 4.0 На самом деле их больше, чем описано здесь, но на мой взгляд, я имею в виду - для меня они не пригодны...
К тому же ни один из методов не поддерживается Netscape`ом или любыми предыдущими версиями Internet Explorer

click

Метод  click  может использоваться, чтобы 'нажать' определенный объект через создание сценария,вызывая событие  onClick  для специфического элемента.
Например, нажмите верхнюю ссылку 1 , и это ' нажмет ' вторую ссылку 2:

Ссылка 1
Ссылка 2

insertAdjacentHTML

Метод insertAdjacentHTML  может использоваться, чтобы вставить новый HTML элемент в документ, без того, чтобы удалить предыдущий HTML. Например:

 document.all.tags("P").item(1).insertAdjacentHTML("BeforeBegin", "<P>Вот вам новый параграф")

Добавил бы новый  <P>'Вот вам новый параграф' перед вторым параграфом в документе. Возможные значения для позиционирования:

 BeforeBegin
 AfterBegin
 BeforeEnd
 AfterEnd

Попробуйте сами...

insertAdjacentText

Метод  insertAdjacentText  идентичен методу insertAdjacentHTML , за исключением того, что это вставляет текст.


- Энциклопедия создания сайтов для начинающих. Создание и поддержка New Web-Masters Club.

Стандартные свойства

Для любого элемента, которые поддерживаетInternet Explorer 4.0,к элементу могут быть добавлены любые атрибуты на ваш выбор, и управление их значениями доступно через создание сценариев.

className

Свойство  className  может используется, чтобы определить, или установить, какое значение из параметров style sheet`а (настройки стиля документов) данный элемент использует. Например, следующий элемент <А> использует style sheet class " warning "

<A HREF="warning.htm" CLASS="warning"> the warning </A>

Например в style sheet используя следующие значения

.warning
{ text-decoration: none; }
.warning:hover
{ color:#878187; }

мы добьемся того, что внешний вид ссылки будет без подчеркивания, а при on mouse over появится подчеркивание, более того сменится цвет ссылки...Это конечно не ново...

document

Свойство  document  содержит ссылку к объекту документа, в котором содержится элемент . Через это могут быть получены, различные свойства объекта документа. Например

document.all.tags('Div')

Обращается ко всем тэгам <DIV>.

filters

Свойство  filters  из коллекции фильтров представляет совокупность Фильтров, примененную к определенному элементу. Например:

<IMG ID="logo" SRC="images/logo.gif" WIDTH="384"
      HEIGHT="154" STYLE="filter:revealTrans(Duration=3.0,
      Transition=12);VISIBILITY:hidden" >
. . .
logo.filters.item(0).Apply()
logo.style.visibility=""
logo.filters.item(0).Play()

Где к изображению применен фильтр Transition filter, который позже вызван в сценарии JavaScript.

id

Свойство  id  присваивает уникальное имя определенному элементу, что впоследствие помогает к нему обратиться...

innerHTML

Свойство  innerHTML  Позволяет вписать в любой элемент с заранее присвоенным ID Новый HTML код полностью заменив предыдущий.

language

Свойство  language  определяет язык сценария используемый для элемента. По умолчанию в Explorer`е используется JavaScript.

style

Свойство  style  определяет конкретный стиль для конкретного элемента.

title

Атрибут  title  отражает подсказку. Значения атрибута  title  обычно используются (в Internet Explorer 4.0) как ToolTips, и отображаются, когда мышь проходит над специфическим элементом. Возможно динамически изменить свойство  title  через создание сценария.


- Энциклопедия создания сайтов для начинающих. Создание и поддержка New Web-Masters Club.

Визуальные фильтры `Dynamic HTML` для IE4

Обратите внимание: фильтры, описанные здесь поддерживаются только Internet Explorer 4.0. Визуальные Фильтры должны быть помещены в Style Sheets поскольку они применяются, используя атрибуты Style Sheet.

Визуальные Фильтры обеспечивают управление визуальными объектами. Также, через создание сценария, примененные фильтры - могут динамически меняться без перезагрузки документа. Обычно, они применяются к элементу <IMG>, но могут применяться и к элементу <DIV>, который в свою очередь могут содержать любой HTML, так что визуальные фильтры могут применяться фактически к любому содержанию. Обратите внимание, что, если они применяются к текстовым блокам ( в элементах <DIV>), элемент <DIV> должен определить атрибуты ширины и высоты Style Sheets .

Список визуальных Фильтров:

Фильтр | Описание
Alpha | Различные эффекты прозрачности объекта.
Blur | Размывает и смазывает объект.
Chroma | Делает определенный цвет прозрачным.
DropShadow | Копирует и сдвигает объект в виде тени.
FlipH | Горизонтальное зеркальное изображение объекта.
FlipV | Вертикальное зеркальное изображение объекта.
Glow | Adds radiance around the outside edges of the object.
Gray | Уничтожает цвета - делает ЧБ объект.
Invert | Название говорит само за себя.
Light | Осветляет объект.
Mask | Выделяет объект.
Shadow | Еще один вид тени(у меня не работают др. параметры).
Wave | Создает волнистый эффект.
XRay | Что-то типа Invert`а и Gray`я.

Internet Explorer так же поддерживает Transition Filters (Reveal и Blend transitions) фильтры появления и смешивания объекта.

Основной синтаксис применения фильтров:

 STYLE="filter:ИМЯ_ФИЛЬТРА(ПАРАМЕТР1, ПАРАМЕТР2...)"

Параметры для каждого фильтра определяются свои собственные они описаны далее.

alpha

Визуальный фильтр Alpha может использоваться, чтобы установить прозрачность объекта - или всего изображения целиком, или области градиента.

STYLE="filter:Alpha(Opacity=opacity,
     FinishOpacity=finishopacity, Style=style, StartX=startX,
     StartY=startY, FinishX=finishX, FinishY=finishY)"

Opacity
Уровень прозрачности, 0-100, где 0 прзрачно, 100 непрозрачно
FinishOpacity
Конечный уровень прозрачности, 0-100, где 0 прзрачно, 100 непрозрачно
Style
принимает значения 0 (uniform), 1 (линия), 2 (круг) or 3 (прямоугольник)
StartX
координатаX начала градиента
StartY
координата Y начала градиента
FinishX
координата X конца градиента
FinishY
координата Y конца градиента

blur

Фильтр Blur создает впечатление движения путем размытия объекта.

 STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

Add
Добавляет размываемый объект к размытому ( любое целое значение, 0 - не добавляет)
Direction
0 - 315 с шагом в 45 - определяет направление размытия
Strength
Целое значение, представляющее число пикселей 'глубины' изображаемого объекта

chroma

Фильтр  Chroma  делает определенный цвет рисунка прозрачным (а надо ???).

 STYLE="filter:Chroma(Color = color)"

Color
Любой цвет ( #rrggbb  ). Что бы данный фильтр работал нормально необходимо, что бы выбранный цвет присутствовал в объекте.

dropShadow

Фильтр  dropShadow добавляет силуэт объекта, смещенный в определенном направлении.

 STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

Color
Цвет тени (  #rrggbb  hex ).
OffX
Горизонтальное смещение тени
OffY
Вертикальное смещение тени
Positive
Любое целое значение (не равное 0) создает тень для видимых пикселей объекта, '0' (false) - для невидимых пикселей.

flipH

Фильтр  FlipH  переворачивает объект горизонтально.

 STYLE="filter:FlipH"

flipV

The  FlipV  переворачивает объект вертикально.

 STYLE="filter:FlipV"

glow

Фильтр  Glow  добавляет сияние вокруг объекта.

 STYLE="filter:Glow(Color=color, Strength=strength)"

Color
Цвет сияния ( #rrggbb  hex ).
Strength
Интенсивность сияния, 0-100

gray

Фильтр  Gray  Уничтожает цвета - делает черно-белый объект.

 STYLE="filter:Gray"

invert

Фильтр  Invert  реверсирует оттенок, насыщенность и яркость объекта.

 STYLE="filter:Invert"

light

Фильтр  Light Делает объект как если бы на него посветили. Световые фильтры применяются, устанавливая световой источник, определенный одним из следующих методов:

AddAmbient (R,G,B,strength)
Добавляет окружающий световой источник к изображению. Окружающий свет не-направлен и освещает всю область. Солнце испускает окружающий свет. Синтаксис:

object.style.filters.Light(n).addAmbient(R,G,B,strength)

Где  R ,  G  и  B  - значения (0-255), чтобы определить цвет окружающего света , и  strength   определяет 'количество' света.

AddCone (x1,y1,z1,x2,y2,R,G,B,strength,spread)
Добавляет к изображению, источник освещения в виде конуса. Свет направленный и освещает только определенную область. Синтаксис:

object.style.filters.Light(n).addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)

Где  x1 ,  y1  Значения определяющие положение источника света,  x2  и  y2  - определяют координаты куда направлен свет,  R ,  G  и  B  - значения (0-255), чтобы определить цвет света, strength   определяет 'количество' света. и  spread определяет угол распространения (0-90, в градусах).

AddPoint (x,y,z,R,G,B,strength)
Добавляет к изображению точечный источник освещения.Точечный источник освещения - лампочка. Синтаксис:

object.style.filters.Light(n).addPoint(x,y,z,R,G,B,strength)

Где  x ,  y  и  z  координаты точечного источника освещения...
осталные параметры как у других методов

Еще несколько методов Светового Визуального фильтра:

ChangeColor (lightnumber, r,g,b, fAbsolute)
Метод  ChangeColor  изменит цвет светового фильтра, примененного к объекту.Используйте  lightnumber  что бы определить световой источник, чей цвет должен быть изменен (это - позиция в массиве Lights), r,g и b, новый цвет,  fAbsoloute  может принимать значение true (nonzero), и false (т.е. zero),на что это влияет посмотрите сами...

ChangeStrength (lightnumber, strength, fAbsolute)
Метод ChangeStrength  изменяет силу определенного светового фильтра ( крторый определяется аргументом lightnumber ) на силу определенную в параметре  strength ...

Clear
Метод  Clear  удаляет все источники света для определенного светового фильтра.

MoveLight (lightnumber, x, y, z, fAbsolute)
Метод  MoveLight  передвигает источник света (в случае AddPoint), место освещения (в случае AddCone). The  x ,  y  и  z  значения определяющие положения передвижения света, или абсолютно (  fAbsoloute=nonzero ) или относительно ( fAbsolute=false ).

mask

Фильтр  Mask  выделяет объект, как если бы вы его иыделили мышью, при этом можно задать цвет выделения. Синтаксис:

 STYLE="filter:Mask(Color=color)"

Где  Color  цвет используемый для выделения.

shadow

Фильтр  shadow  делает тень объекту. Синтаксис:

 filter:Shadow(Color=color, Direction=direction)

Color
определяет цвет тени ( #rrggbb  hex)
Direction
(0-315 с шагом в 45 градусов), определяет направление тени.

wave

Фильтр  wave  делает объект волнистым. Синтаксис:

 filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)

Add
значение , определяющее, добавлен ли первоначальный объект (true, nonzero) к фильтрованному объекту или нет (false, zero)
Freq
целое значение, определяющее число волн
LightStrength
сила волны в %
Phase
определяет угловое смещение волн (т.е. 0/100% = 360 градусов, 25% = 90 градусов)
Strength
целое значение, определяющее интенсивность эффекта волны

xray

Фильтр  xray  воздействует на объект как Х-луч (?). Синтаксис:

 STYLE="filter:Xray"

Transition Filters

RevealTrans Filter

Фильтр  RevealTrans  может быть применен к любому объекту, показывая или пряча его, при этом используются различные техники. Синтаксис:

 STYLE="filter: revealtrans(duration=duration, transition=transitionshape)

Где  Duration  время перехода из одного состояния в другое. Формат записи  секунды.миллисекунды  Например 2.1 = 2 секунды, 100 миллисекунд.  Transition(переход)  может быть следующим ( названия оставлю на английском что бы не портить художественный замысел авторов...):

Значение | Описание
0 | Box in
1 | Box out
2 | Circle in
3 | Circle out
4 | Wipe up
5 | Wipe down
6 | Wipe right
7 | Wipe left
8 | Verical blins
9 | Horizontal blinds
10 | Checkerboard across
11 | Checkerboard down
12 | Random dissolve
13 | Split vertical in
14 | Split vertical out
15 | Spli horizontal in
16 | Split horizontal out
17 | Strips left down
18 | Strips left up
19 | Strips right down
20 | Strips right up
21 | Random bars horizontal
22 | Random bars vertical
23 | Произвольный эффект (любой из 23)

Внимание : Фильтр Reveal Transition лучше применять со следующими событиями:

Apply
Метод  Apply  используется, чтобы фактически применить фильтр.

Play
Метод  Play  используется, чтобы фактически запустить фильтр.

Stop
Метод  Stop  используется что бы остановить применение фильтра, и может быть вызван в любое время когда фильтр запущен.

Properties

Фильтры Reveal Transition имеют свойства status и duration . Свойство  Duration  отражает текущую продолжительность фильтра и  status  определяет значение в зависимости от текущего состояния перехода. "0" = stop, "1" = apply, "2" = play.

BlendTrans Filter

Фильтр  BlendTrans  может быть применен к объекту, что бы 'проявить' его (fade it) или 'затушить' (fade out), через определенный период времени. Синтаксис:

 STYLE="filter: blendtrans(duration=duration)"

Где  Duration  время занимаемое переходом. Формат записи  секунды.миллисекунды  Например 2.1 = 2 секунды, 100 миллисекунд.


- Энциклопедия создания сайтов для начинающих. Создание и поддержка New Web-Masters Club.

Dynamic HTML

Возможность управлять содержанием документа внутри самого документа, т.е. все элементы внутри документа - это программируемые объекты с поддержкой для действий мыши и ввода с клавиатуры.

'Dynamic HTML' поддерживается и Microsoft`ом и Netscap`ом, версиями браузеров Internet Explorer 4.0 и Communicator 4.0.

Далее будут рассмотрены стандартные 'Dynamic HTML ' свойства, методы и события.

События Dynamic HTML

Методы Dynamic HTML

Свойства Dynamic HTML

Визуальные фильтры