CFA LogoCFA Logo Computer
Загрузка поиска
Новости Компьютеры Прайс-лист [Новое] Прайс-лист [Б/У] Для ноутбуков Конфигуратор ПК Заказ, Оплата, Доставка Сервис объявления Драйвера Статьи Как нас найти Контакты
Новости
RSS канал новостей
Компания Hewlett-Packard выпустила в продажу ноутбук модели HP Envy x360, основой для которого послужил ...
Компания G.Skill в эти дни объявила о выпуске новых представителей серии оперативной памяти Trident ...
Список материнских плат компании Biostar пополнился свежими моделями под поколения процессоров Intel ...
Похоже, что компания Gionee в эти дни очень сильно занята. Только недавно мы сообщали об анонсе ...
Компания Enermax в своем коротеньком пресс-релизе рассказала общественности о старте серии недорогих ...
Самое интересное
Программаторы 25 SPI FLASH Адаптеры Optibay HDD Caddy Драйвера nVidia GeForce Драйвера AMD Radeon HD Игры на DVD Сравнение видеокарт Сравнение процессоров

АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2002 ГОД

Устрой себе легкую жизнь

Никита СЕНЧЕНКО guru@bi.com.ua

(Окончание, начало см. МК № 31—32, 34—35, 47, 49—52, 10 (150—151, 153—154, 166, 168—171, 181))
Сегодня мы заканчиваем разговор о каскадных таблицах. Следуя желанию читателей, в последней статье этой серии я хотел бы рассказать о совместном применении CSS и JavaScript. Вообще, этот материал относится к CSS лишь наполовину и во многом затрагивает язык JavaScript, с которым некоторые читатели, скорее всего, пока не знакомы. Но пусть они не переживают: во-первых, примеры, которые я приведу, можно просто взять и скопировать к себе на страничку, не углубляясь в дебри JavaScript, а, во-вторых, постараюсь по ходу дела давать, насколько это возможно, содержательные и понятные комментарии.

Итак, начнем.

Объединение CSS и JavaScript открывает совершенно новые горизонты. Суть такого объединения заключается в том, что теперь те свойства CSS, которые без JavaScript были статическими, с его помощью становятся динамически изменяемыми, то есть пользователь может наблюдать изменение объектов прямо в своем браузере. Инструменты JavaScript воздействуют на инструменты CSS, управляют ими, заставляя при этом элементы HTML Рис. 1менять свои свойства.

Но давайте сразу перейдем к примеру.

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

Продемонстрирую весь процесс по шагам — так, думаю, будет легче понять смысл происходящего.

Шаг 1. Вставим на страницу картинку (рис. 1):

Шаг 2. Присваиваем картинке идентификатор.

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

Шаг 3. Добавляем обработчик событий.

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

Для того чтобы при возникновении какого-нибудь из этих событий на странице выполнялся какой-либо сценарий JavaScript, надо определить обработчики событий, то есть те функции, которые будут срабатывать при возникновении этого конкретного события. В нашем примере событием является наведение пользователем курсора мышки на картинку, ведь так? В JavaScript такой обработчик называется onMouseover. Вставляем его прямо внутрь тэга <IMG>:

Что такое bordershow(), вы узнаете, прочитав следующие несколько строчек.

Шаг 4. Напишем сценарий.

Для того чтобы определить, что именно должно происходить, когда пользователь наведет курсор на картинку, надо написать соответствующий сценарий JavaScript. В нашем случае это будет несложная функция bordershow(), состоящая всего из нескольких строк. Когда пользователь наведет курсор на картинку, сработает обработчик события onMouseover, который, в свою очередь, вызовет функцию bordershow(). А эта функция уже, собственно, и очерчивает рамку вокруг картинки:

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

Две строки в теле функции состоят из следующих частей:

picture.Это тот самый идентификатор, который мы присвоили нашей картинке в шаге 2. Указав его, мы показали функции то место на странице, где должен выполняться наш сценарий (в данном случае этим местом является наша картинка).

style.Это свойство JavaScript. С его помощью мы предупреждаем, что будем использовать CSS.

• borderStyle и borderColor. Так мы показываем, что именно будет изменяться в нашем объекте. В CSS эти атрибуты пишутся так: border-style и border-color. Существует такое правило: когда в JavaScript используются атрибуты, название которых пишется через дефис, нужно убрать дефис и писать оба слова слитно. Причем второе слово должно начинаться с заглавной буквы. Поэтому в сценарии JavaScript border-style будет выглядеть как borderStyle, а border-color как borderColor.

solid и blue. Это новые значения, которые принимают атрибуты.

Кстати, описание функции bordershow() должно помещаться в тэги <SCRIPT language=“JavaScript”> и </SCRIPT>. Этот блок может, в принципе, находиться в любом месте HTML-кода, но предпочтительнее ставить его где-нибудь между <HEAD> и </HEAD>.

С помощью <SCRIPT language=“JavaScript”> мы указываем браузеру, что далее идет код функций JavaScript. Тэг </SCRIPT> указывает на окончание блока.

Таким образом, наш пример полностью будет выглядеть так:

Готово! Теперь, когда мы наводим курсор на картинку, вокруг нее появляются синие границы (см. рис. 2) — то есть именно то, чего мы добивались.

Но обратите внимание, что когда мы убираем курсор с картинки, границы остаются. Это происходит потому, что мы не задали обработчик на событие «снятие курсора с картинки», который срабатывал бы при снятии курсора мыши с нашего объекта. Этот обработчик задается подобно уже описанному нами onMouseover и называется onMouseout. Для этого обработчика надо написать новую функцию:

Эта функция снимет границы вокруг картинки. Ее нужно поместить в блок <SCRIPT …> </SCRIPT> после функции bordershow(). Для того чтобы она сработала при снятии курсора мыши, зададим в тэге <IMG> обработчик событий onMouseout:

Теперь при отведении курсора границы исчезнут.

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

К примеру, именно сочетанием CSS и JavaScript достигается эффект выпадающих меню (пример тут: http://www.webmoney.ru), «меню с подсветкой» или, что практически то же самое, таблицы с подсвечивающимися ячейками (рис. 3).

Рис. 2   Рис. 3

Всю информацию о JavaScript вы сможете найти в печатных или электронных справочниках. Ну а в вашем знании CSS я могу уже не сомневаться. Не сомневайтесь и вы :-).

На этом объявляю свою серию статей о CSS завершенной. А читателей «Моего Компьютера» объявляю стопроцентными профессионалами в этой области :-).

Удачи всем! Пишите, если что…

Рекомендуем ещё прочитать:






Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:

RSS
Комментарий:
Введите символы: *
captcha
Обновить





Хостинг на серверах в Украине, США и Германии. © www.sector.biz.ua 2006-2015 design by Vadim Popov