Продолжаем разговор о применении скриптов на web-страничках. И начнем мы, пожалуй, с написания некоторых функций, которые нам впоследствии очень пригодятся.
Способ внедрения Java-скрипта в страничку я описал в предыдущей статье и в последующих примерах скриптов буду опускать всю эту стандартную обвязку, но Вы должны помнить, что в реальном проекте код должен быть описан полностью.
Определение типа и версии броузера
Как известно, броузеры отличаются широтой толкования стандартов HTML. Один и тот же код в каждом из броузеров проявляется несколько по-разному. Чтобы получить одинаковый результат иногда требуется писать разный код - для каждого броузера свой. И, разумеется, функция, которая бы сообщала нам о том, подходит броузер для отображения странички в полном объеме или нужно ограничиться урезанной версией, была бы как нельзя кстати.
Узнать тип используемого броузера достаточно просто. Нужно прочитать значение свойства appName объекта navigator. Точно таким же образом из свойства navigator.appVersion мы выуживаем версию броузера. Все это реализуется следующим фрагментом кода:
var browser_name = navigator.appName;
var browser_version = parseFloat(navigator.appVersion);
В принципе, эти переменные уже можно использовать для того, чтобы писать броузерозависимый код. Но мы поступим немного по-другому и для удобства воспользуемся механизмом флажков. Т.е. определим некую глобальную логическую переменную, например, browser_ok и в зависимости от результата проверок полученных ранее переменных browser_name и browser_version присвоим ей значение true (если по результатам проверки броузер удовлетворяет неким условиям) или false (в противном случае).
Логичный вопрос - зачем все нужно так усложнять? И ответ - для упрощения написания сложных функций и избежания повторных проверок.
Итак, вот пример кода, в котором мы проверяем броузер на соответствие следующим критериям: он должен быть либо Internet Explorer, либо Netscape Navigator и иметь версию не ниже 4-ой:
var browser_ok = false;
if (browser_name == "Netscape" && browser_version >= 4.0)
browser_ok = 'true';
else if (browser_name == "Microsoft Internet Explorer" &&
browser_version >= 4.0)
browser_ok = 'true';
Разумеется, условие может быть и более сложным, в зависимости от того, какие цели Вы преследуете. Кроме проверки типа и версии броузера мы можем также узнать количество используемых цветов, ширину и высоту экрана, возможность поддержки определенных плагинов и другие не менее полезные вещи, а значит, и скорректировать поведение скрипта. Можно завести более одного флажка, если мы собираемся писать разный код для разных броузеров. В данном конкретном случае мы просто выполнили проверку броузера на соответствие 4-ой версии. Это было сделано с целью безболезненного отсечения старых версий броузеров (чтобы они не показывали ошибку при обращении к страничке) и для проверки возможности использования DHTML.
Итак, код проверки броузера и выставления флажка, сигнализирующего о том, что броузер нам подходит, мы написали. А теперь научимся этим пользоваться. Основное правило заключается в том, что весь зависимый от этого флажка код нужно предварять проверкой его значения:
function somefunction() {
if (browser_ok == 'true') {
// здесь и располагается зависимый код
}
}
Таким образом, старые версии броузеров, которые не умеют работать с новыми технологиями, просто не получат непонятный для себя код и, соответственно, не сгенерируют ошибку.
Генерация случайного числа
Не столь уж и редкая ситуация, когда нам может понадобиться сгенерировать случайное число. Это может пригодиться, например, для написания странички, которая случайным образом показывает каждый раз новую картинку или афоризм при заходе на сайт. Но это может быть и часть более сложной системы - например, механизм локальной баннерной системы.
Для генерации случайного числа мы воспользуемся JavaScript объектом Math, метод random которого генерирует случайное число от 0 до 1. Но, так как нам обычно нужны целые числа из некоего диапазона, то будет логичным написать небольшую функцию, которая все это будет делать автоматически. Вот как выглядит соответствующий фрагмент кода:
function getrandom() {
var min_random = 0;
var max_random = 10;
max_random++;
var range = max_random - min_random;
var n=Math.floor(Math.random()*range) + min_random;
return n;
}
Перед использованием скрипта нужно лишь определить границы диапазона, в которых генерируется случайное число (соответственно, переменные min_random и max_random).
Несколько небольших и полезных Java-скриптов позволяющих добавить к функциональности сайта некоторые приятные мелочи.
Дата модификации документа
Некоторые web-дизайнеры находят полезным отображать внизу странички дату последней модификации документа. Это делается для того, чтобы посетитель мог определить, насколько часто обновляется сайт. Правда это же накладывает и определенные обязательства по поддержке сайта. Согласитесь, что наблюдать прошлогоднюю дату доставляет мало удовольствия. Но если Вы все же решились использовать этот прием, то следующий скрипт Вам пригодится.
Есть два способа добиться нужного нам результата. Первый заключается в том, что строчку с датой вы корректируете вручную, а второй, и он более привлекательный, заключается в использовании свойства lastModified объекта document. Для этого в нужном месте странички достаточно вставить следующую конструкцию:
<script language="JavaScript">
<!--
document.write ("Дата последней модификации: " + document.lastModified);
//-->
</script>
Дата выводится в формате, соответствующем региональным настройкам компьютера, а это не всегда нам подходит. Но, несколько усложнив скрипт, мы сможем выводить дату практически в любом формате. Для этого достаточно печатать дату модификации документа не сразу, а предварительно разобрав ее на составляющие. Сделать это можно при помощи создания объекта Date, передав ему в качестве параметра document.lastModified:
<script language="JavaScript">
<!--
LastDate = new Date(document.lastModified);
LastDay = LastDate.getDate(); // Считываем число
LastMonth = LastDate.getMonth(); // Считываем месяц
LastYear = LastDate.getYear(); // Считываем год
LastYear = LastYear % 100;
LastYear = ((LastYear < 50) ? (2000 + LastYear) : (1900 + LastYear));
document.write ("Дата последней модификации: ", LastDay, "/", LastMonth+1, "/", LastYear);
//-->
</script>
Теперь осталось только прочитать день, месяц и год, воспользовавшись методами объекта Date и напечатать дату в нужном нам формате. Именно так и сделано в вышеприведенном скрипте, который печатает дату в формате, соответствующим региональным настройкам России (ДД/ММ/ГГГГ).
Обратите внимание на два обстоятельства. Первое это то, что при печати месяца мы увеличиваем его на единичку, так как метод getMonth() возвращает нам номер месяца в виде целого числа от 0 (январь) до 11 (декабрь).
А второе заключается в том, что год мы печатаем не сразу, а вначале решаем проблему 2000 года. В данном случае эта проблема заключается в том, что метод getYear() в версии JavaScript от Microsoft возвращает нам год в виде четырех цифр, а в версии Netscape Navigator в виде последних двух (после 2000 года в виде трех :), которые следует рассматривать как смещение от 1900 года.
Решение проблемы осуществляется достаточно просто - вначале мы берем остаток от целочисленного деления на 100 и тем самым гарантированно получаем год в виде двух последних цифр. Теперь нужно выяснить к какому веку относятся эти две цифры - для этого мы сравниваем их с 1950-м годом и считаем, что если число меньше 50, то это уже новый век, а иначе старый. Данным способом мы превратили проблему 2000 года в проблему 2050 года :), когда эта уловка уже наверняка потеряет смысл.
Как сделать страничку стартовой?
В последнее время стало достаточно модным применять этот скрипт. Его смысл заключается в том, что где-нибудь на видном месте странички мы делаем ссылку, нажав на которую пользователь сможет сделать Вашу страничку стартовой, т.е. такой, которая загружается при запуске броузера и нажатии на кнопку "Домой".
Этот прием может быть полезен для информационных ресурсов, но не стоит им особо злоупотреблять.
К сожалению, на данный момент скрипт будет работать только под Internet Explorer версии 5.x. Учтите это. Сам же код требуется разместить в подходящем месте, а выглядит он так:
<p><a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage("http://www.yoursite.com/"); return false;">Сделать стартовой страницей</a></p>
Добавление странички в "Избранное"
Подобно предыдущему скрипту, этот прием также работает лишь под Internet Explorer, но уже начиная с 4-ой версии. И точно такие же замечания по поводу его уместности.
Размещая на видном месте ссылку на этот скрипт, мы позволяем пользователю при помощи одного щелчка добавить наш сайт в папку "Избранное". А сам скрипт выглядит следующим образом:
<p><a href="#" onClick="window.external.addFavorite("http://www.yoursite.com/", 'Description'); return false;">Добавить сайт в Избранное</a></p>
Желаете проверить? http://www.sunlimited.ru/index.php# , 'Cherry-Design'); return false;">Нажмите здесь, и Вы сможете добавить в избранное мой сайт. :-)
Распечатка страницы из кода
Иногда требуется распечатать страничку, причем сделать это нужно непосредственно из кода. Сначала кажется, что это невозможно, но все не так плохо. На самом деле в Netscape Navigator для этого есть, даже, встроенный механизм. Достаточно просто вызвать метод window.print().
А вот для получения такого же результата в Internet Explorer мы применим не совсем обычный способ и воспользуемся специализированным объектом ActiveX, который и позволит нам распечатать страничку.
Таким образом, наша задача разделилась на две части. Первая - определить тип броузера, а вторая корректно вставить объект на страничку. Вот пример кода, который делает все необходимые действия:
<script language="JavaScript">
<!--
var browser_name = navigator.appName;
function printit() {
if (browser_name == "Netscape") {
window.print();
} else {
var WebBrowser = '<object id="WebBrowser1" width=0 height=0
classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);
}
}
//-->
</script>
Осталось только вызвать этот код. Для этого, к примеру, можно воспользоваться событием onClick:
<a href="#" onClick="printit();">Распечатать статью</a>
Только не путайте этот скрипт с версиями страничек "для распечатки". Страничка для распечатки это обычный html-файл, из которого убрали дизайнерское оформление и оставили очень простую верстку, чтобы при печати не было лишних элементов. Приведенный же выше код непосредственно посылает страничку на принтер.
В этой статье мы начнем разбираться с более сложными и функционально-законченными скриптами. Пройдем по шагам, через все стадии - начиная с постановки задачи и заканчивая универсальным скриптом, готовым к употреблению. И начнем с проверки формы перед отсылкой на сервер.
Общие соображения и HTML-код формы
Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо ее вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна - проверить, что пользователь заполнил все нужные поля перед отправкой, и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.
Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:
<form action="/cgi-bin/formmail.cgi" onsubmit="return SendForm();">
Ваше имя: *<input type="text" name="name"><br>
Электронный адрес: *<input type="text" name="email"><br>
Тема сообщения: <input type="text" name="subject"><br>
Сообщение: <textarea name="message"></textarea><br><br>
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</form>
* - необходимые для заполнения поля
Заметьте, что в отличие от обычной формы, непосредственно в теге <form> мы отслеживаем событие onsubmit, и при его наступлении вызываем функцию проверки формы SendForm().
Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onClick? Ответ простой - при использовании события onClick кнопку "Submit" придется заменить обычной кнопкой. И в случае, если в броузере отключена поддержка JavaScript, мы не сможем отправить форму (!). Отслеживание же события OnSubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.
Будем считать, что необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Если Вы внимательно присмотритесь к HTML-коду нашей формы, то заметите, что рядом с этими полями я поставил звездочку, а в конце формы разместил сноску. Сделано это, разумеется, для удобства и элементарного уважения к пользователю.
Функция проверки формы перед отправкой
А теперь перейдем к главному - к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от нее требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых, отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.
Для начала напишем общую обвязку функции:
<script language="JavaScript">
<!--
function SendForm() {
// Здесь мы разместим код функции
return true;
}
//-->
</script>
Примененный нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.
Теперь попробуем написать проверочную функцию, привязанную к данной конретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое - это проверить содержимое каждого из обязательных полей на отсутствие текста:
<script language="JavaScript">
<!--
function SendForm() {
if (document.forms[0].name.value == "") {
alert('Пожалуйста, введите Ваше имя');
document.mailform.name.focus();
return false
}
if (document.forms[0].email.value == "") {
alert('Пожалуйста, введите электронный адрес');
document.mailform.email.focus();
return false
}
return true;
}
//-->
Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:
сначала проверяем, что данное поле является пустым. И если это так, то
выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.
Универсальная функция проверки
Если нам необходимо проверить всего два или три поля, то с таким методом проверки "по одиночке" еще можно смириться, но что, если их несколько десятков? А ведь такое не редкость - особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей.
Первым делом, мы создадим массив, где перечислим имена всех полей, которые требуют проверки:
required = new Array("name", "email");
Такой подход позволит нам очень легко добавлять и модифицировать список обязательных полей без непосредственного изменения кода самой функции.
Дополнительно к вышеописанному массиву, мы добавим еще один, который будет содержать текст ошибки для конкретного поля:
required_show = new Array("Ваше имя", "электронный адрес");
Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введен".
Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в цикле. Вот как будет выглядеть модифицированная функция проверки:
<script language="JavaScript">
<!--
required = new Array("name", "email");
required_show = new Array("Ваше имя", "электронный адрес");
function SendForm () {
var i, j;
for(j=0; j<required.length; j++) {
for (i=0; i<document.forms[0].length; i++) {
if (document.forms[0].elements[i].name == required[j] && document.forms[0].elements[i].value == "" ) {
alert('Пожалуйста, введите ' + required_show[j]);
document.forms[0].elements[i].focus();
return false;
}
}
}
return true;
}
//-->
</script>
В цикле происходит проверка всех полей формы на совпадение с "обязательными". В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом - введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.
Вот, в общем-то, и все. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме.
Сегодня мы разберемся с тем, как организовать на страничке локальную баннерную систему, пользуясь только средствами JavaScript. Данная функция, кстати, может быть полезна и программистам на ASP.
Для чего это нужно?
Механизм баннеров позволяет оживить страничку и зрительно создать впечатление, что сайт все время меняется. Наиболее полезна эта функция будет для контент-сайтов - очень удобно создавать баннеры для конкретных статей и размещать их в локальной баннерной системе. Лучше всего, конечно, механизм прокрутки баннеров организовать на стороне сервера с применением Perl, PHP или ASP, но не у всех, к сожалению, есть доступ к CGI-скриптам. И, в этом случае, для решения задачи мы можем воспользоваться встроенными скриптовыми языками.
Несмотря на то, что я буду объяснять как написать небольшую баннерную систему с использованием JavaScript, изложенные принципы вполне применимы и для любых других языков.
Условия задачи и ограничения
А теперь, давайте, более подробно сформулируем условия задачи и введем ряд ограничений, которые упростят программирование. Баннерная система должна выполнять следующие функции:
где-то хранить базу данных о баннерах
случайно выбирать, из вышеупомянутой базы, несколько неповторяющихся баннеров
обеспечивать механизмы отображения баннеров и перехода на нужную страничку при нажатии
Накладываем на эти условия некоторые ограничения:
баннеры будут фиксированного размера, и храниться в формате GIF или JPEG
на страничке мы будем одновременно показывать четыре баннера
Ну вот, условия и ограничения определены. Теперь, давайте, более подробно рассмотрим, каким образом лучше всего хранить баннеры. В качестве базы для хранения параметров баннеров мы воспользуемся обычным массивом. О каждом из баннеров нам будет необходимо хранить следующую информацию:
имя файла
альтернативный текст
адрес странички, на которую ссылается баннер
Для удобства хранения и обновления базы баннеров, лучше всего выделить ее описание в отдельный файл и подключить при помощи механизма вставки внешнего js-файла. Это делается в секции заголовка при помощи следующей конструкции:
<script language="JavaScript" src="banners.js"></script>
А вот так, будет выглядеть содержимое файла banners.js
var banners = new Array(
"pic-01.gif", "Text #1", " http://www.link1.com/" ;,
"pic-02.gif", "Text #2", " http://www.link2.com/" ;,
"pic-03.gif", "Text #3", " http://www.link3.com/" ;,
"pic-04.gif", "Text #4", " http://www.link4.com/" ;,
"pic-05.gif", "Text #5", " http://www.link5.com/" ;,
"pic-06.gif", "Text #6", " http://www.link6.com/" ;,
"pic-07.gif", "Text #7", " http://www.link7.com/" ;,
"pic-08.gif", "Text #8", " http://www.link8.com/" ;,
"pic-09.gif", "Text #9", " http://www.link9.com/" ;,
"pic-10.gif", "Text #10", " http://www.link10.com/" ;
)
Как видите, структура массива не очень сложна. Под каждый баннер отводится три последовательные ячейки, в которых и хранятся: имя файла, альтернативный текст, адрес ссылки.
Программная часть
Вот мы и добрались до программирования. И, сначала, разберемся с некоторыми моментами.
Начнем с генерации неповторяющихся баннеров. Для выбора произвольного баннера, нам необходимо сгенерировать случайное число в диапазоне от нуля до числа баннеров минус один. Это несложно и делается следующим фрагментом кода:
n = Math.floor(Math.random()*(banners.length/3));
Но, как я уже упоминал раньше, мы договорились, что одновременно на страничке будут показываться четыре баннера. И, следовательно, после каждой генерации случайного числа нам необходимо проверить, что данный баннер не совпадает с 3-мя другими. К тому же нам нужно где-то хранить уже сгенерированные числа. Для решения этих задач, мы организуем еще один массив - случайных чисел и при каждой генерации нового числа будем сопоставлять его с найденными ранее. Полный код, который решает эти проблемы, приведен ниже:
var i, j;
var flag; // Флажок, используемый для проверки совпадения
var banners_show = 4; // Число показываемых на страничке баннеров
var rand = new Array(banners_show-1);
for (i=0; i<banners_show; i++) {
do {
flag=0;
n = Math.floor(Math.random()*(banners.length/3));
for (j=0; j<i; j++) {
if (n == rand[j]) {
flag=1;
}
}
} while (flag);
rand[i] = n;
}
Ввиду того, что баннеры будут генерироваться на лету, в процессе загрузки страницы, вышеприведенный фрагмент кода необходимо разместить вне функции. В момент, когда броузер перейдет к отрисовке странички, мы уже будем иметь готовый массив случайных чисел.
Для отрисовки баннеров, мы напишем простую функцию, и будем передавать ей в качестве параметра порядковый номер баннера на страничке. Используя этот номер, мы читаем из массива rand[] случайное число для конкретного баннера и уже используя его, находим все необходимые для отрисовки данные:
function Show_Banner(number) {
n=rand[number-1];
document.write('<a href="' + banners[n*3+2] + '"><img src="banners/' + banners[n*3] + '"' + 'border=0 width=' + banner_width + ' height=' + banner_height + ' alt="' + banners[n*3+1] + '"></a>');
}
Вот, практически и все, наша локальная баннерная система готова. Осталось только четыре раза вызвать функцию Show_Banner() из подходящей части странички. Нужно, только не забыть, что код JavaScript отделяется от html тегами <script></script>:
<script>
<!--
Show _ Banner (1);
//-->
</ script >
.......
<script>
<!--
Show_Banner(4);
//-->
</script>
Для проверки работоспособности локальной баннерной системы, несколько раз нажмите в броузере кнопку Reload и убедитесь, что каждый раз генерируются разные и не совпадающие друг с другом баннеры.
Эффект, который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И заключается он в смене изображения при наведении на него мышкой. Часто можно слышать английское название эффекта - 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), высоте (height), поясняющему тексту (alt) и т.д. В нашем же случае достаточно будет изменить только ссылку на картинку, т.к. изображения "обычной" и "нажатой" кнопки имеют одинаковые размеры.
Все необходимые знания для написания функции у нас уже есть, так что приступим. Вот код на JavaScript, который осуществляет подмену изображений. В качестве параметров мы передаем ему имя рисунка и ссылку на изображение "нажатой" (или "отжатой") кнопки:
function change(img, ref) {
if (browser_ok == 'true') {
document.images[img].src = ref;
}
}
О способе определения типа и версии броузера подробно написано в первой статье цикла о JavaScript.
Бегающий указатель
Чем отличаются варианты 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 для каждой невидимой в данный момент картинки и указываем адрес изображения. Это приводит к тому, что, дойдя до этого фрагмента кода, броузер инициирует загрузку изображений точно так же, как и для обычных видимых картинок. К концу загрузки странички абсолютно все картинки, ее составляющие, находятся в кэше, и от этого будут загружаться мгновенно.
Приведенным выше способом необходимо скэшировать все невидимые на страничке картинки. Обратите также внимание, что я осуществляю проверку корректности броузера, и в случае, если это достаточно старая версия, которая не поддерживает смену изображений, то лишняя графика просто не грузится - тем самым несколько ускоряя загрузку странички.
При грамотной нарезке страничек сайта мы можем использовать часть изображений первой страницы во внутренних. Подобный механизм реализован на моем собственном сайте ( http://www.cherry-design.spb.ru/ ). Если Вы к нему внимательно присмотритесь, то обнаружите, что почти вся необходимая графика грузится на первой страничке и открытие внутренних разделов сайта происходит почти мгновенно. В частности, оказываются уже загруженными фрагменты логотипа разных цветов и графика, составляющая пункты меню.
Надеюсь, что приведенные выше скрипты и описание механизма их работы, покажутся Вам полезными, и, используя их, Вы сможете реализовать свои задумки.
Немного специфическая статья и посвящена она решению проблем, возникающих при использовании на сайте фреймов. И, в частности, проблеме индексации таких сайтов поисковыми роботами и формированию фреймовой структуры при обращении к одной из внутренних страничек.
В общем случае от применения фреймов лучше всего воздержаться. Описание возникающих при этом проблем можно найти вот в этой статье. Если же применения фреймов избежать не удается, то приходится как-то решать эти проблемы. Вот этим мы сейчас и займемся.
Подготовка сайта к индексации
Начнем с более простого - подготовки сайта, использующего фреймы, к индексации поисковыми роботами.
В чем суть проблемы? Поисковые роботы представляют собой специальные программы, которые умеют путешествовать по ссылкам, начиная от некоторой корневой страницы. Когда Вы пытаетесь занести свою страничку в базу данных поисковой системы, Вас обычно просят ввести адрес главной страницы сайта. И вот с этого момента робот ставит Ваш запрос в очередь. Через некоторое время он пойдет по указанной ссылке и тщательно проанализирует всю страничку, вытащив из нее ключевые слова, краткое описание и другую полезную информацию. Все это он заботливо сохранит в своей базе данных. После того, как главная страничка будет проиндексирована, робот пойдет по ссылкам, которые на ней указаны, и будет заносить в базу все встречающиеся по пути странички. Глубина индексации обычно ограничивается 3 уровнями иерархии в пределах домена, на котором расположен сайт. Что, в принципе, правильно, иначе индексация сайта никогда бы не подошла к своему логическому завершению.
Таким образом индексируются обычные сайты, и так как на первой страничке обычно есть ссылки на все основные разделы сайта, то индексация проходит успешно. В случае с фреймами все не так. Т.е. робот пытается честно проиндексировать сайт по своим правилам, но у него, к сожалению, ничего не получается. Если Вы создавали странички с использованием фреймов, то знаете, что фреймы описываются в специальной страничке-контейнере. И, как правило, описываются лишь фреймы и формирующие их файлы. Никаких ссылок во внешний мир на этой страничке попросту нет(!). И что же происходит? Робот находит такую страничку, сохраняет ее в своей базе и... дальше ему некуда идти - он считает, что работа закончена и переходит к индексации следующего сайта. А мы получаем абсолютно непроиндексированный сайт! А значит, нашу страничку не смогут найти при помощи поисковых систем!
Ради справедливости следует заметить, что наиболее "продвинутые" поисковые системы уже пытаются индексировать сайты с фреймами и усложняют свои программы-роботы.
Ну а как же все-таки подготовить сайт с фреймами к правильной индексации? Как уже было сказано выше, проблема заключается в отсутствии на страничке-контейнере ссылок на основные разделы сайта. Значит, нам нужно просто добавить эти ссылки самим. И, поместим мы их в секции <noframes></noframes>, которая, кстати, специально была придумана для таких случаев. Заметьте также, что этот способ позволяет нам сделать сайт доступным для броузеров, которые не поддерживают фреймы.
А вот и пример корректного кода, осуществляющего все сказанное выше:
<html>
<head>
<title>Пример документа с фреймами</title>
</head>
<frameset cols="180,*">
<frame src="menu.htm" name="menu">
<frame src="content.htm" name="content">
</frameset>
<noframes>
<a href="content.htm">Содержание сайта</a>
<a href="page_1.htm">Страница #1</a>
<a href="page_2.htm">Страница #2</a>
<a href="page_3.htm">Страница #3</a>
</noframes>
</html>
В данном фрагменте я опустил описание META-тегов для упрощения изложения, но Вам будет необходимо их добавить перед началом регистрации сайта в поисковых системах. Подробности о том, как это сделать, Вы можете найти вот на этой страничке.
Решение проблемы с формированием структуры фреймов
Ну, а теперь займемся самой сложной проблемой - формированием фреймовой структуры при обращении к одной из внутренних страниц сайта. Проблема, в общем-то, заключается не в формировании структуры фреймов, а в отображении в одном из окон той самой запрошенной пользователем странички.
Но давайте сначала рассмотрим истоки проблемы. Как ни странно, они связаны в основном с поиск
