INTERNET-WEB.RU
Обучение работе с ПК
Операционные системы
Флеш (Flash)

Несколько замечаний по использованию динамических эффектов

При включении в свои страницы эффектов, которые поддерживаются только последними версиями программ просмотра, учитывайте, что другие пользователи Интернета не обязаны обновлять свои версии браузеров, даже если это обновление для них бесплатно. Значительная часть посети- телей сайтов прекрасно обходится и предыдущими версиями, которые мо- 1 гут не поддерживать используемые при оформлении эффекты. Проверьте, 1 как будут смотреться ваши решения в этих случаях. Хорошим тоном будет анализ версии программы просмотра и модификация в зависимости от этого применяемых способов оформления. Откройте для примера страни-] цы сайтов известных фирм и посмотрите, сколько кодов они используют; для того, чтобы удовлетворить максимальное количество посетителей.

Для применения динамических эффектов необходимо, чтобы соответ- : ствующий участок был описан одним из стилей HTML. Вы можете использовать для выделения блока документа два специальных тэга, которые не 1 вносят никакого дополнительного оформления. Это:

<SPAN>... </SPAN> <DIV>... </DIV>

Тэг <span> удобно использовать для обозначения участка текста. С его помощью можно присвоить участку текста имя, которое будет затем использовано в JavaScript, или назначить какой-либо стиль.

Тэг <div> позволяет, кроме того, использовать позиционирование обозначенного элемента в окне программы. Только имя этому блоку присваивается с помощью параметра ID (<div ID = "имя ">).

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

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

 Изменение фона текста при движении мышью над элементом.

<span onmouseover =

"this. style. backgroundColor = red; " onmouseout = "this. style. backgroundColor= white;"> Текст </span>

При нахождении курсора мыши над словом Текст фон под ним станет красным, если убрать курсор — вновь белым. Для задания эффекта использованы события, которые возникают при движении мыши. В результате происходит изменение свойства стиля, который относится к участку текста, ограниченному тэгом <span>. Цвет меняется на красный (и наоборот).

а «Движущаяся картинка».

Включите в документ описание стиля с относительным размещением:

#mylmg position: relative; top: 0; left: 0

Оформите иллюстрацию в документе этим стилем: <div id= "mylmg"ximg src = "nyTb"x/div> После этого с помощью JavaScript, например, после щелчка по какому-нибудь элементу, переопределите координаты рисунка: mylmg. style. top= 56 mylmg. style. left = 34 И рисунок займет указанное вами положение!

 «Пропадающий» участок документа.

Чтобы скрыть какой-либо участок документа, просто присвойте ему свойство «невидимости»: display: none Чтобы вновь показать на экране, присвойте следующий стиль:

display:

а Изменяющийся текст.

В этом примере по щелчку мышью по любому месту документа текст абзаца «Щелкните мышью по документу!» будет заменен на новый — «. Новый текст».

<SCRIPT>

function change 

Test. innerText = "Новый текст";

</SCRIPT>

<BODY onclick = "change  ">

<P ID = "Тез>Щелкните мышью по документу!</P>

После щелчка мышью по документу вызывается обработка события для этого действия — функция changeO — Она меняет содержимое блока с идентификатором Test на новое.

© 2009 internet-web.ru. All Rights Reserved