Банк рефератов содержит более 364 тысяч рефератов, курсовых и дипломных работ, шпаргалок и докладов по различным дисциплинам: истории, психологии, экономике, менеджменту, философии, праву, экологии. А также изложения, сочинения по литературе, отчеты по практике, топики по английскому.
Полнотекстовый поиск
Всего работ:
364150
Теги названий
Разделы
Авиация и космонавтика (304)
Административное право (123)
Арбитражный процесс (23)
Архитектура (113)
Астрология (4)
Астрономия (4814)
Банковское дело (5227)
Безопасность жизнедеятельности (2616)
Биографии (3423)
Биология (4214)
Биология и химия (1518)
Биржевое дело (68)
Ботаника и сельское хоз-во (2836)
Бухгалтерский учет и аудит (8269)
Валютные отношения (50)
Ветеринария (50)
Военная кафедра (762)
ГДЗ (2)
География (5275)
Геодезия (30)
Геология (1222)
Геополитика (43)
Государство и право (20403)
Гражданское право и процесс (465)
Делопроизводство (19)
Деньги и кредит (108)
ЕГЭ (173)
Естествознание (96)
Журналистика (899)
ЗНО (54)
Зоология (34)
Издательское дело и полиграфия (476)
Инвестиции (106)
Иностранный язык (62792)
Информатика (3562)
Информатика, программирование (6444)
Исторические личности (2165)
История (21320)
История техники (766)
Кибернетика (64)
Коммуникации и связь (3145)
Компьютерные науки (60)
Косметология (17)
Краеведение и этнография (588)
Краткое содержание произведений (1000)
Криминалистика (106)
Криминология (48)
Криптология (3)
Кулинария (1167)
Культура и искусство (8485)
Культурология (537)
Литература : зарубежная (2044)
Литература и русский язык (11657)
Логика (532)
Логистика (21)
Маркетинг (7985)
Математика (3721)
Медицина, здоровье (10549)
Медицинские науки (88)
Международное публичное право (58)
Международное частное право (36)
Международные отношения (2257)
Менеджмент (12491)
Металлургия (91)
Москвоведение (797)
Музыка (1338)
Муниципальное право (24)
Налоги, налогообложение (214)
Наука и техника (1141)
Начертательная геометрия (3)
Оккультизм и уфология (8)
Остальные рефераты (21697)
Педагогика (7850)
Политология (3801)
Право (682)
Право, юриспруденция (2881)
Предпринимательство (475)
Прикладные науки (1)
Промышленность, производство (7100)
Психология (8694)
психология, педагогика (4121)
Радиоэлектроника (443)
Реклама (952)
Религия и мифология (2967)
Риторика (23)
Сексология (748)
Социология (4876)
Статистика (95)
Страхование (107)
Строительные науки (7)
Строительство (2004)
Схемотехника (15)
Таможенная система (663)
Теория государства и права (240)
Теория организации (39)
Теплотехника (25)
Технология (624)
Товароведение (16)
Транспорт (2652)
Трудовое право (136)
Туризм (90)
Уголовное право и процесс (406)
Управление (95)
Управленческие науки (24)
Физика (3463)
Физкультура и спорт (4482)
Философия (7216)
Финансовые науки (4592)
Финансы (5386)
Фотография (3)
Химия (2244)
Хозяйственное право (23)
Цифровые устройства (29)
Экологическое право (35)
Экология (4517)
Экономика (20645)
Экономико-математическое моделирование (666)
Экономическая география (119)
Экономическая теория (2573)
Этика (889)
Юриспруденция (288)
Языковедение (148)
Языкознание, филология (1140)

Реферат: JavaScript: полезные функции

Название: JavaScript: полезные функции
Раздел: Рефераты по информатике, программированию
Тип: реферат Добавлен 04:43:19 07 августа 2005 Похожие работы
Просмотров: 638 Комментариев: 3 Оценило: 0 человек Средний балл: 0 Оценка: неизвестно     Скачать

Mike Melnikov

Эффект, который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И заключается он в смене изображения при наведении на него мышкой. Часто можно слышать английское название эффекта - RollOver, что обычно переводят как "перекатывание". Мне не кажется это название удачным, но все же, давайте приступим.

Эффект может встречаться в различных вариантах, самые распространенные из которых это:

подсвечивание пунктов меню

бегающий указатель

сменяющаяся картинка

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

Подсвечивание пунктов меню

Наиболее часто встречающаяся реализация эффекта RollOver. Его основой является подмена картинки при наведении курсора мышки и возврат к первоначальной после того, как мышка ее покинет.

Для начала, нам будет необходимо нарисовать каждую кнопку меню в двух вариантах: в "отжатом" и "нажатом" состояниях. Будем считать, что это уже сделано и перейдем к рассмотрению механизма, который обеспечивает нужную нам функциональность.

Начнем с написания HTML-кода меню. Это несложно и будет выглядеть примерно так:

<a href=""><img src="pic/pic-1.gif" name="pic1"></a><br>

<a href=""><img src="pic/pic-2.gif" name="pic2"></a><br>

<a href=""><img src="pic/pic-3.gif" name="pic3"></a>

Это обычное меню, составленное из графических элементов. Я опустил несущественные для понимания детали - такие как указание высоты и ширины изображения, тег ALT и т.п. Заметьте, однако, что для каждой картинки указан атрибут name, который понадобится для ссылки на картинку.

Теперь мы немного модифицируем меню, добавив в него вызов функций смены изображения. Для отслеживания попадания курсора мышки на изображение мы воспользуемся событием onMouseOver и привяжем к нему вызов функции смены изображения:

onMouseOver="change('pic1','pic/pic-1-on.gif');"

А для отслеживания ухода курсора с изображения, на помощь придет событие onMouseOut которое также вызывает функцию смены изображения, но уже с другими параметрами:

onMouseOut="change('pic1','pic/pic-1.gif');"

В первом случае мы указываем ссылку на изображение "нажатой кнопки", а во втором, соответственно, "отжатой" (или исходной картинки, что суть одно и тоже).

Теперь напишем всю конструкцию полностью на примере одного пункта меню:

<a href="page.htm" onMouseOver="change('pic1','pic/pic-1-on.gif');"

onMouseOut="change('pic1','pic/pic-1.gif');"><img

src="pic/pic-1.gif" name="pic1"></a>

Подобным образом необходимо обработать каждый пункт нашего меню. Отличие будет заключаться лишь в смене значения атрибута name, который для каждого пункта должен быть уникальным и соответствующей коррекции значений параметров в вызовах функций onMouseOver и onMouseOut.

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

Броузер перед показом странички на экране, разбивает ее на составляющие блоки и заносит их в свою базу данных, предоставляя нам доступ к информации посредством объектной модели. В частности, все картинки сохраняются в объекте images, который, в свою очередь, входит в объект document. И, например, для того, чтобы заменить одно изображение другим, нам достаточно воспользоваться следующей конструкцией:

document.images["pic1"].src = "pic/pic-1-on.gif";

Обратите внимание, что для ссылки на конкретное изображение (ведь на страничке их может быть много), мы используем имя картинки, которое указали в атрибуте name тега <img>. В данном примере, мы изменили изображение обычной кнопки, на ее "нажатый" вариант.

Точно таким же образом, мы можем обратиться и к другим атрибутам картинки: ширине (width), высоте (heigth), поясняющему тексту (alt) и т.д. В нашем же случае достаточно будет изменить только ссылку на картинку, т.к. изображения "обычной" и "нажатой" кнопки имеют одинаковые размеры.

Все необходимые знания для написания функции у нас уже есть, так что приступим. Вот код на JavaScript, который осуществляет подмену изображений. В качестве параметров мы передаем ему имя рисунка и ссылку на изображение "нажатой" (или "отжатой") кнопки:

function change(img, ref) {

if (browser_ok == 'true') {

document.images[img].src = ref;

}

}

Бегающий указатель

Чем отличаются варианты RollOver с "подсвечиванием пунктов меню" и "бегающим указателем"? Только тем, что во втором случае у нас есть всего две картинки, используемые для всех пунктов меню - пустая и с изображением указателя.

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

<img src="pic/pointer.gif" name="pic1"><a

href="news.htm" onmouseover="over('pic1');"

onmouseout="out('pic1');"><img src="pic/pic-1.gif"></a>

Обратите внимание на несколько особенностей. Во-первых, вместо одной функции смены изображения нам понадобятся две, т.к. действия, производимые при попадании курсора в область пункта меню, и покидании ее слегка отличаются. Мы назовем эти функции соответственно over() и out(). Во-вторых, заметьте, что атрибут name, тега <img>, переместился из описания пункта меню в описание указателя - ведь теперь мы подсвечиваем не меню, а указатель!

Число параметров, передаваемых функциям можно сократить - достаточно ограничиться именем картинки (атрибут name), т.к. ссылки на изображения, формирующие указатель, нам известны заранее. Код, осуществляющий необходимые действия, теперь выглядит так:

function over(img) {

if (browser_ok == 'true') {

document.images[img].src = "pic/pointer-on.gif";

}

}

function out(img) {

if (browser_ok == 'true') {

document.images[img].src = "pic/pointer.gif";

}

}

Осталось разобраться с отличиями, которые присущи третьему варианту эффекта, а именно...

Сменяющаяся картинка

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

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

<img src="pic/default.gif" name="pic">

...

<a href="page_1.htm" onmouseover="over('pic/image-1.gif');"

onmouseout="out();"><img src="pic/pic-1.gif"></a><br>

<a href="page_2.htm" onmouseover="over('pic/image-2.gif');"

onmouseout="out();"><img src="pic/pic-2.gif"></a><br>

<a href="page_3.htm" onmouseover="over('pic/image-3.gif');"

onmouseout="out();"><img src="pic/pic-3.gif"></a>

Соответственно, придется скорректировать и поведение функций. В функцию over(), которая вызывается в результате попадания курсора в активную область, достаточно передать только ссылку на заменяющее изображение. Вызов же функции out() осуществляется и вовсе без параметров:

function over(ref) {

if (browser_ok == 'true') {

document.images[img].src = ref;

}

}

function out() {

if (browser_ok == 'true') {

document.images[img].src = "pic/default.gif";

}

}

Вот мы и разобрались со всеми вариантами скриптов, для реализации эффекта RollOver. Но, подождите еще немножко, т.к. осталось рассмотреть еще один очень важный вопрос:

Предварительная загрузка изображений

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

Для чего используется предварительная загрузка изображений? Ответ лежит в самом механизме работы интернет - как известно, любая страничка состоит из набора файлов, которые загружаются одновременно с основной страничкой. Но есть одна особенность - загружаются только картинки, которые видны на экране. Наш же эффект построен на подмене изображений и соответственно часть картинок при загрузке не видна.

Предварительная загрузка заключается в том, что мы заранее скачиваем невидимые картинки в кэш компьютера. Если предзагрузка не используется, то при смене картинки будет происходить заметная задержка - связанная с тем, что картинка будет загружаться непосредственно с сервера.

Механизм предварительной загрузки изображений осуществляется при помощи следующего фрагмента кода:

if (browser_ok == 'true') {

a1=new Image; a1.src="pic/pic-1-on.gif";

a2=new Image; a2.src="pic/pic-2-on.gif";

a3=new Image; a3.src="pic/pic-3-on.gif";

}

Мы просто создаем объект Image для каждой невидимой в данный момент картинки и указываем адрес изображения. Это приводит к тому, что, дойдя до этого фрагмента кода, броузер инициирует загрузку изображений точно так же, как и для обычных видимых картинок. К концу загрузки странички, абсолютно все картинки ее составляющие находятся в кэше, и от этого будут загружаться мгновенно.

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

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

Оценить/Добавить комментарий
Имя
Оценка
Комментарии:
Где скачать еще рефератов? Здесь: letsdoit777.blogspot.com
Евгений21:35:47 18 марта 2016
Кто еще хочет зарабатывать от 9000 рублей в день "Чистых Денег"? Узнайте как: business1777.blogspot.com ! Cпециально для студентов!
14:45:19 24 ноября 2015
Работа с таймером и интервалами
Работа с таймером и интервалами17:53:05 13 марта 2008

Работы, похожие на Реферат: JavaScript: полезные функции

Назад
Меню
Главная
Рефераты
Благодарности
Опрос
Станете ли вы заказывать работу за деньги, если не найдете ее в Интернете?

Да, в любом случае.
Да, но только в случае крайней необходимости.
Возможно, в зависимости от цены.
Нет, напишу его сам.
Нет, забью.



Результаты(150330)
Комментарии (1830)
Copyright © 2005-2016 BestReferat.ru bestreferat@mail.ru       реклама на сайте

Рейтинг@Mail.ru