Веб - Дизайн. От А до Я.
# 19
22 октября 2001г.
Проект сайта "AGS Design" http://dweb.ru
кол-во подписчиков - 9300

    В этом выпуске:

  Ссылки Вебмастеру:

* Web-дизайн, архив рассылок
* Анимация и графика
* Иконки и кнопки
* Фоновые изображения
* Flash
* Баннеры
* Все скрипты
* Фото
* 3D анимация

Доброе время суток!


Копилка веб-мастера. Часть 5


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

Эффект MouseOver
В последнее время появилась большая мода на включение JavaScript-событий onMouseOver и onMouseOut в код веб-документов, содержащих различные объекты (навигационные меню, простые графические изображения, таблицы и пр.). Вы наверняка не раз посещали Интернет-сайты, на которых присутствовали некие элементы, изменяющиеся как только над ними установится курсор мыши. Наводите курсор - вид элемента изменяется (событие onMouseOver), убираете курсор - элемент принимает свой исходный вид (событие onMouseOut). Такой эффект чаще всего применяется к текстовым фрагментам, табличным ячейкам и графическим изображениям. Рассмотрим каждый из вариантов.

По сути, говоря об изменении внешнего вида текста при наведении на него курсора, следует заметить, что в данном случае никакое событие языка JavaScript не используется: данный эффект достигается при помощи каскадных таблиц стилей CSS:

A         { color: black; }
A:Hover   { color: red; }


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

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

TD.normal
{
background:black;
}
TD.selected
{
background:silver;
}


По данному стилевому предписанию, исходный цвет ячеек должен быть черным (TD.normal и background:black;), а при наведении на них курсора мыши становится серебристым (TD.selected и background:silver;). Теперь осталось связать события замены/возврата объекта с заданными стилевыми параметрами (не забывайте обособлять наименования назначенных стилевых классов отдельными одинарными кавычками):

<td class="normal" onMouseOver="this.className='selected'" onMouseOut="this.className='normal'">Ячейка 1</td>

Однако, наибольшую популярность все же получило использование эффекта изменения при наведении курсора в области графических изображений. Если текст и табличные ячейки могли только менять цвет, то графика давала гораздо больше возможностей для фантазии, т.к. во втором элементе (выводящимся посредством события onMouseOver) можно было менять все, что угодно: цвет, размер, оформление, надписи и т.д. Можно просто поменять исходный зеленый цвет надписи на графической заготовке на желтый, а можно добавить эффект объемности или подсветки, или поместить подсказку. Одним словом, вариантов совместного применения графики и данных событий JavaScript - огромное количество, и все их перечислить невозможно, поэтому перейдем непосредственно к тому, как этот своеобразный альянс реализовать. Сначала определяем условия отображения графических заготовок для двух разных событий (раздел HEAD):

<script language = "JavaScript">
<!-- //
if (document.images) {

     img0on = new Image();
     img0on.src ="./img/1_active.gif";

     img1on = new Image();
     img1on.src ="./img/2_active.gif";

     img2on = new Image();
     img2on.src ="./img/3_active.gif";

     img0off = new Image();
     img0off.src ="./img/1_passive.gif";

     img1off = new Image();
     img1off.src ="./img/2_passive.gif";

     img2off = new Image();
     img2off.src ="./img/3_passive.gif";


}


где 1_active.gif, 2_active.gif, 3_active.gif - файлы, отображающиеся при наведении курсора мыши; 1_passive.gif, 2_passive.gif, 3_passive.gif - исходные файлы и файлы, повторно загружаемые браузером, когда курсор перемещается за пределы графических заготовок;

Далее необходимо определить функции, выполняющие замену/возврат изображений:

function imgOn(imgName) {
     if (document.images) {
          document[imgName].src = eval(imgName + "on.src");

}
}

function imgOff(imgName) {
     if (document.images) {
          document[imgName].src = eval(imgName + "off.src");

}

}
// -->
</script>


На этом код самого JavaScript-сценария, вставляемого в раздел HEAD документа, заканчивается. Теперь нужно связать HTML-код графических изображений с заданными параметрами посредством событий onMouseOver и onMouseOut:

<a href="page1.html" onMouseOver = "imgOn('img0'); return true" onMouseOut = "imgOff('img0')" ><img src="./img/1_passive.gif" width=150 height=50 border=0 name="img0"></a>

<a href="page2.html" onMouseOver = "imgOn('img1'); return true" onMouseOut = "imgOff('img1')" ><img src="./img/2_passive.gif" width=150 height=50 border=0 name="img1"></a>

<a href="page3.html" onMouseOver = "imgOn('img2'); return true" onMouseOut = "imgOff('img2')" ><img src="./img/3_passive.gif" width=150 height=50 border=0 name="img2"></a>


Здесь необходимо обратить особое внимание на следующие моменты. Во-первых, значения onMouseOver и onMouseOut должны совпадать с условиями, определенными в начале скрипта:


	img0on = new Image();          
	img0on.src ="./img/1_active.gif";

	img0off = new Image();
	img0off.src ="./img/1_passive.gif";
Другими словами, нельзя для данных условий задать следующее: onMouseOver = "imgOn('img2'); return true" onMouseOut = "imgOff('img2')", т.к. далее у нас указан файл неактивной графической заготовки 1_passive.gif, отображение которого зависит от фрагмента кода, данного чуть выше. onMouseOver = "imgOn('img2'); return true" onMouseOut = "imgOff('img2')" будет соответствовать условиям:

	img2on = new Image();          
	img2on.src ="./img/3_active.gif";

	img2off = new Image();
	img2off.src ="./img/3_passive.gif";
Во-вторых, обязательно указание атрибута NAME в теге IMG графических изображений со значением, соответствующим условиям отображения (начало сценария) и параметрам событий onMouseOver и onMouseOut.

На этом, в принципе, можно было и завершить разговор о способах реализации эффекта MouseOver, однако освещение областей применения этого эффекта было бы неполным, если не упомянуть такое средство динамического HTML, как фильтры. Вообще следует заметить, что сегодня DHTML-фильтры пользуются весьма низкой популярностью по старой, как мир, причине: несовместимость документов, использующих такие фильтры, с такими браузерами, как Netscape Navigator и Opera (разумеется, Microsoft как компания-разработчик динамических средств HTML осуществила в своем браузере полную поддержку данной спецификации).

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

Для того, чтобы получить этот эффект, нам потребуется всего одна графическая заготовка (а не пара, как в предыдущем примере!) и какой-нибудь DHTML-фильтр (возьмем один из наиболее часто встречаемых, а именно - alpha, устанавливающий степень прозрачности объекта). Исходя из синтаксических правил указания фильтров и JavaScript-событий onMouseOver и onMouseOut, вписываем в нужное место документа следующую инструкцию (раздел BODY):

<img src="./img/example.gif" style="filter:alpha(opacity=75)" onMouseOver="this.filters.alpha.opacity=100" onMouseOut="this.filters.alpha.opacity=75" width=250 height=85>

Здесь свойство фильтра opacity определяет степень прозрачности: значение "0" означает полную прозрачность объекта, значение "100" - нормальный вид изображения (без действия фильтра). Согласно описанию событий замены/возврата объекта, исходный вид изображения будет "обработан" фильтром alpha и сделает его "прозрачнее" (светлее в визуальном плане). При наведении курсора мыши на заготовку объект принимает свой первоначальный вид (onMouseOver="this.filters.alpha.opacity=100), при перемещении курсора за пределы изображения на объект вновь накладывается фильтр (onMouseOut="this.filters.alpha.opacity=75).

Чтобы фрейм не стал помехой
Несмотря на продолжающиеся споры о функциональной пригодности фреймов, такой вид структуры сегодня можно встретить в Интернете очень часто. Если не брать во внимание домашние страницы и небольшие, исключительно информативные веб-узлы, то чаще всего фреймовую структуру можно встретить в каталогах ресурсов, порталах, базах данных, электронных банках вакансий и пр. Это, прежде всего, обусловлено желанием разработчиков определенного онлайн-сервиса дать возможность пользователю постоянно иметь перед глазами если не все, то наиболее важные и необходимые пункты меню. Чего нельзя (или чрезвычайно сложно) достигнуть при больших объемах выдаваемой информации. А если предположить, что структура состоит не из двух (как обычно) окон, а более, то пользователю бывает сложно сориентироваться во всем этом многообразии фреймов. Один из примеров, подтверждающих это утверждение, - занесение документа в "Избранное". Возьмем, к примеру, каталог ресурсов, рабочая область которого разбита на три окна (фрейма): верхнее - основное меню, правое нижнее - рубрикатор тем, левое нижнее - содержание рубрик каталога. Пользователь, выбрав нужный себе раздел, хочет впоследствии быстро к нему получить доступ, занеся его себе в "Избранное". Но адрес, обозначенный в строке браузера, остается неизменным (что-то типа http://www.catalog.ru), а в "фавориты" будет занесен не конкретный документ, содержащий перечень ссылок каталога по интересущей пользователя теме, а целая фреймовая конструкция: нужная страницы, навигация и рубрикатор. При повторном обращении к такой "закладке" браузер загрузит 2/3 абсолютно ненужной информации.

Как же избежать такого неудобства? Если вы пользователь такого ресурса, то можете просмотреть код и выявить требуемый URL. Если вы автор подобного проекта, то советую вам позаботиться о своих посетителях и вставить в код каждой страницы, являющейся потенциальным URL'ом для занесения в "Избранное", небольшой скрипт:

<script language="JavaScript" type="text/javascript">
<!--
document.write("Адрес этой страницы: " + document.location);
// -->
</script>


При загрузке документа, содержащего этот код, отобразится полный путь текущей страницы, например, - "Адрес этой страницы: http://www.catalog.ru/catalog/auto/toyota/index.html". Теперь посетителю гораздо проще и удобнее будет работать с каталогом (или иным ресурсом), зная полный URL интересующего его документа.

HTML или JavaScript?
Сегодня в Интернете очень часто встречаются так называемые меню быстрого перехода, представляющие собой обычные HTML-dropdown-меню (ниспадающие меню). Одни такие меню используют в качестве основной навигации (чем экономят очень много места на странице), другие, не желая загромождать главное меню, помещают в такой раскрывающийся список второстепенные пункты, подразделы и пр., третьи делают его дублирующим (например, внизу каждой страницы) и т.д. Одним словом, такое меню - вещь, безусловно, нужная и полезная, а в ряде случаев - просто необходимая. Используя в качестве основы стандартный раскрывающийся список HTML (теги SELECT и OPTION), переход по заданным адресам можно осуществить 3-мя основными способами: посредством "чистого" HTML, HTML плюс JavaScript и с помощью CGI. Если вы читали хотя бы парочку статей цикла "Копилка веб-мастера", то наверняка заметили, что все предлагаемые примеры относятся к типу Client-Side (исполняемых на строне клиента). Это сделано специально, т.к. далеко не каждый имеет доступ к серверным настройкам и может исполнять свои собственные скрипты. Поэтому остановимся на первых двух вариантах реализации.

HTML-вариант чрезвычайно прост. Вот примерный листинг для такого HTML-меню:

<form>
<select name="menu">

<option value="page1.html">Страница 1</option>

<option value="page2.html">Страница 2</option>

<option value="page3.html">Страница 3</option>

</select>

<input type="button" value="Перейти" onclick="top.location.href=this.form.menu.options[this.form.menu.selectedIndex].value">
</form>


Посредством тега OPTION можно добавлять сколько угодно новых пунктов меню. У тега SELECT обязательно должен быть атрибут NAME со значением, соответствующим объекту в записи "top.location.href=this.form.menu.options" (расшифровка следующая: "документ во весь экран=в этом окне.эта форма.название этой формы.значения пунктов").

С помощью JavaScript такое меню можно реализовать по-разному. Вот один из вариантов. Задаем массив данных:

<script language="JavaScript">

function MakeArray()
{
this.length = MakeArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = MakeArray.arguments[i]
}


Определяем переменную наименований пунктов меню (названия пунктов в кавычках):

var sitename = new MakeArray(
"Страница 1",
"Страница 2",
"Страница 3"
);


Определяем переменную конечных адресов перехода после выбора пункта меню (адреса в кавычках):

var url = new MakeArray(
"page1.html",
"page2.html",
"page3.html"
);


Задаем функцию перехода по указанным адресам из HTML-меню:

function gotoURL(form)
{
i = form.SelectMenu.selectedIndex;
window.location.href = url[i+1];
}
document.writeln('<form>');
document.writeln('<select name="SelectMenu">');
go = sitename.length;
for (var i = 1; i <= go; i++)
document.write("<option>" +sitename[i]);
document.writeln('</select>');
document.writeln('<input type="button" value="Перейти" onClick="gotoURL(this.form)">');
document.writeln('</form>');
// -->
</script>


Алексей Петюшкин


Оглавление/Вверх


Основы CSS.


Это просто. Делаем так:
<font size=-1 TITLE="Подсказка" style=cursor:w-resize; OnMouseOver="this.style.color='red';" OnMouseOut="this.style.color='#FFFF00';">ЗАНЕСТИ В ИЗБРАННОЕ</font>

Добавить в ИЗБРАННОЕ

Сборная конструкция, так сказать. Подсказка, изменение курсора, изменение цвета под мышкой. Обратите внимание - цвет после "посещеня" мышки устанавливается отдельно! Если хотите, чтобы цвет возвращался к исходному, установите исходный цвет текста.

Зачем я все это привожу? Обратите внимание на this.style.color=. В данном случае мы меняем цвет текста, но так можно изменить цвет чего угодно. Вместо color мы можем изменять и другие свойства обьектов.

ONMOUSEOVER="this.className = 'k';"
ONMOUSEOUT="this.className = 'kd';"
Еще более "актуальный" случай— изменение класса обьекта в ответ на событие. В данном виде— изменение класса при наведении мышки. Именно так делаются простейшие меню— описываем необходимые параметры для обоих классов и изменяем класс обьекта в ответ на наведение мышки.

ONMOUSEOVER="this.src = '11.gif';"
ONMOUSEOUT="this.src = '22.gif';"
В данном случае мы меняем один рисунок на другой при наведении мышки. Только предварительно картинки подгрузить рекомендуется.

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

A-design studio http://mtk.on.ufanet.ru


Оглавление/Вверх


Ведущий рассылки Дмитрий Давыденко