Часто мне доводилось слышать такие вопросы: "Есть несколько страниц с
одинаковым меню. Как сделать так, чтобы при переходе на любую страницу,
соответствующая этой странице ссылка выделялась и писалась обычным текстом, а
не ссылкой?" Собственно, это делается очень просто с помощью JavaScript. Весь скрипт
будет размещаться во внешнем файле и занимать не более пяти строк.
Итак, для начала мы имеем некоторое количество однотипных страниц, с одинаковым
меню. Например, какой-нибудь каталог или рейтинг. Для нормальной работы нужно
все страницы назвать по порядку именами содержащими числа. Самый простой
пример, берем и называем все однотипные страницы так: 1.htm, 2.htm, 3.htm и так далее. Но я для
примера возьму следующие обозначения: page1.htm, page2.htm и page3.htm. Всего у меня будет три страницы.
Скрипт, отображающий меню на этих страницах, будет выглядеть так:
var numb;function menu (numb) {document.write(" <br>Страницы: ");for(i=1;i<4;i++){if( i == numb ) document.write('<b><font size=+1>'+ i +' </font></b>'); else document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a> </b>');} }
Переменная "numb" в этом скрипте нужна для обозначения той страницы на которой мы
сейчас находимся. Этот скрипт помещаем в файл. Назовем его к примеру menu.js. Все, про этот скрипт
забыли и переходим к нашим страницам на которых должно быть меню. В самом
начале документа между тэгами <head> и </head> нужно написать строку, которая говорила бы
обработчику, из какого файла нужно брать скрипт. Пишем:
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js">
</SCRIPT>
Теперь одинаковое меню будет на каждой странице. Для того чтобы весь наш
скрипт работал, в него необходимо передать информацию о том, какая страница в
данный момент загружена. Эту информацию можно передать двумя способами. Первый
- наиболее простой и примитивный - все вписывается в ручную. Второй - более
тернистый и сложный - все определяет скрипт. Лично мне больше нравится первый
(простой) способ. В нем все просто до предела и проблем никаких не возникает.
Мы просто берем и дописываем к предыдущей строке
<SCRIPT>numb=1;</SCRIPT>
Соответственно, для второй страницы numb нужно присвоить
значение 2, и тд.
Теперь в том месте, где у нас должно находится меню вписываем
<script>menu (numb); </script>
Все.
В конечном виде в каждый файл нужно дописать эти строки
<head>…<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT><SCRIPT>numb=1;</SCRIPT>…</head>
где переменной numb присваивается значение в зависимости от имени файла и строку
<script>menu (numb); </script>
которая во всех файлах одинакова. То есть получается, что нам в каждый файл
нужно прописать по три строки.
Если в дальнейшем число страниц увеличится, то мы просто в файле menu.js увеличиваем число до
которого должен доходить цикл. Это строка
for(i=1;i<4;i++)
Если число страниц увеличивается, то вместо 4 нужно писать число равное числу
страниц плюс один.
В принципе, меня этот скрипт вполне устраивает, но можно его доработать, чтобы
во все файлы вписывать абсолютно одинаковые строки и не менять значение numb в ручную. Правда
скрипт значительно увеличится в размерах.
Итак, усложняем скрипт. Причем хочу заметить, что в этом случае не получится
написать абсолютно универсальный скрипт. И вот почему. Скрипт будет отличаться
в зависимости от того, как у нас названы файлы и в зависимости от того,
используются ли фреймы на нашем сайте. Предположим, что мы не используем на
сайте фреймы и файлы у нас названы так как мы приняли вначале. Тогда в каждый
файл пишем
<head>…<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>…</head><body>…<script>menu (); </script>…</body>
Зато скрипт, находящийся во внешнем файле, немного усложнится и будет выглядеть
следующим образом:
var numb;var st; function menu ( ) {st = parent.location.pathname;numb = st.substring ( st.lastIndexOf ( "e" )+1, st.length - 4 );document.write(' <br> Страницы: ');for(i=1;i<4;i++){if ( i == numb) document.write('<b><font size=+1>'+ i +'
</font></b>'); elsedocument.write('<b><a href="page'+ i +'.htm">
'+ i +'</a> </b>');}}
Напомню еще раз, что этот скрипт не универсален. Пояснять его я не буду. Кто
разбирается в JavaScript, тот сам поймет что к чему и сможет переделать его под свои нужды, а всем
остальным предлагаю использовать первый (более простой) скрипт.
Примечание:
Если у вас под рукой нет справочника JavaScript, то ниже я перечисляю использованные в скрипте
методы, свойства и объекты.
1. location - объект. Полная информация об URL текущего документа. Объект location используется для
определения URL любого активного документа, включая документы в других окнах или кадрах
навигатора. Если объект window не указан, подразумевается текущее окно. Каждое
свойство объекта location содержит отдельную часть URL. Шесть частей URL
отражены в объекте location:
protocol://hostname:port/pathname search#hash
2. substring - метод.
Возвращает часть строкового объекта в зависимости от двух индексов.
StringName.substring(index1,
index2)
3. lastIndexOf - метод.
Возвращает позицию символа или подстроки в строке, начиная поиск с конца.
4. length -
свойство. Целое число, показывающее длину или размер соответствующего
Перед тем, как вы начнете читать этот материал, рекомендую ознакомиться с предыдущей статьей, так как все изложенное ниже является своего рода
продолжением.
После публикации моей статьи "Меню с выделением" я получил письма, в
которых меня просили о помощи. Дело в том, что скрипт который я рассматривал
всем хорош, пока имеешь дело с несколькими файлами (10-20). А если попытаться
использовать его для создания меню к 30 и более файлам, то сталкиваешься с
рядом проблем. А именно, скрипт пишет все номера страниц в одну строку и при
большом количестве страниц получается весьма длинная строка, которая в конечном
итоге перестает помещаться в экран. Я усовершенствовал этот скрипт и теперь его
можно использовать при ЛЮБОМ количестве ссылок.
Я
решил, что самым удобным является такое меню, когда кроме текущей страницы
отображаются ссылки на 5 страниц назад и на 5 страниц вперед. Таким образом,
появляется возможность двигаться как вперед по списку, так и назад, причем
можно перескакивать сразу через несколько ссылок. То есть, итогом работы
скрипта будет являться фрагмент меню отображаемый в документе с возможностью
перемещения по ссылкам.
Изначально скрипт меню из файла menu.js выглядел таким образом:
var numb;function menu (numb) {for(i=1;i<4;i++){if( i == numb ) document.write('<b><font size=+1>'+ i +' </font></b>'); else document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a> </b>');
} }
Напомню, что переменная "numb" служит для хранения номера текущей
страницы.
Нам понадобятся еще дополнительные переменные. Переменная "х" для
хранения числа равного количеству ссылок, которые мы хотим видеть сзади и
впереди от текущей. Например, если х = 5, то в меню будет видно пять предыдущих
ссылок и пять последующих. Надеюсь, вы поняли, что я хотел сказать.
Переменные "a" и "b" для хранения в них номеров первой и последней отображаемых ссылок.
И, наконец, константа "d", которая равна общему числу ссылок
(например у нас будет 40 ссылок - d = 40). После добавления новых страниц ее значение
нужно каждый раз менять в скрипте.
Все эти переменные вписываем вместе с "numb"
var numb;var a,b;var d=40;var x=5;Теперь переходим к изменению самой функции. Сначала нужно определить пределы в которых будет ограничено наше меню. Делаем так:
a = eval(numb) - x;b = eval(numb) + x;if(a<1) { b = b + (1 - a); a = 1; }if(b>d) { a = a - (b - d); b = d; } Итогом этих четырех строк является присвоение переменной "а"
значения первой отображаемой ссылки, а переменной "b" значения последней
отображаемой ссылки. Теперь, когда мы определили в каких пределах нужно
отображать фрагмент меню, займемся непосредственно написанием кода для
формирования меню:
for(i=a;i<b+1;i++) {if( i == numb ) document.write('<b><font size=+1>
'+ i +' </font></b>'); else
document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a> </b>'); }
Если использовать скрипт в таком виде, то меню будет выглядеть так (для
20-ой страницы):
15 16 17 18 19 20 21 22 23 24 25
Здесь все номера страниц кроме номера 20 будут ссылками, а сам номер 20 -
обычным увеличенным текстом.
Мы, находясь на 20-ой странице, можем переместиться как вперед так и назад на
одну или несколько (в этом случае не больше пяти) страниц. В принципе, в таком
виде этот скрипт уже готов к употреблению, но можно сделать его более удобным.
Например, добавить кнопки перемещающие на самую первую и на самую последнюю
страницу.
<< 15 16 17 18 19 20 21 22 23 24 25 >>
Теперь, нажав на ссылку "<<" мы переместимся на первую
страницу, а если нажмем на ">>", то на последнюю.
И
в конечном итоге, чтобы меню выглядело таким образом, скрипт (menu.js) должен быть следующим:
var numb;var a,b;var d=40;var x=5;function menu (numb) { a = eval(numb) - x;b = eval(numb) + x;if(a<1) { b = b + (1 - a); a = 1; }if(b>d) { a = a - (b - d); b = d; }if(numb > 1) document.write('<b><a href="page1.htm">
<<</a></b>'); else
document.write('<b><<</b>');for(i=a;i<b+1;i++) {if( i == numb ) document.write('<b><font size=+1>
'+ i +' </font></b>'); else
document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a> </b>');
} if(numb<d) document.write('<b><a href="page' + d + '.htm">
>></a></b>'); else
document.write('<b>>></b>');}
Ну и, конечно же, как и ранее, в каждый файл содержащий меню нужно вписывать
строки:
<head>…<SCRIPT LANGUAGE="JavaScript" SRC="menu.js">
</SCRIPT>
<SCRIPT>numb=1;</SCRIPT>…</head>
и в том месте где вы хотите видеть
меню строку
<script>menu (numb); </script>P.S. Не забывайте после
добавления каждого нового файла изменять в скрипте константу "d" !!!
Этот скрипт поможет вам организовать
на своем сайте или страничке баннерную систему. Что это такое вы ведь
знаете?(Кто незнает см. внизу страницы:))
Первый фрагмент вы вставляете в
любое место странички. Лучше в теге <HEAD>.
<SCRIPT
language="JavaScript">
// <!-- Begin
function banners()
{
bn[1]="http://www.ссылка1.ru";
bn[2]="http://картинка1.gif";
bn[3]="http://www.ссылка2.ru";
bn[4]="http://картинка2.gif";
bn[5]="http://www.ссылка3.ru";
bn[6]="http://картинка3.gif";
if ((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0,1)) < 3)) { return(' '); }
var j=(new Date()).getSeconds() % 5;
document.write('<a href=' + bn[2*j+1] + ' target=blank><img src='
+ bn[2*j+2] + ' border=0 width=468 height=60></a>');
return(' ');
}
// -->
</SCRIPT>
Второй фрагмент нужно разместить в
том месте, где предполагается вывод на экран баннера.
<SCRIPT language="JavaScript">
// <!-- Begin
banners();
// -->
</SCRIPT>
Для каждого нового баннера нужно
добавить две строки, с нумерацией по возрастающей, после описания последнего.
Например так будут выглядеть строки для четвертого баннера:
bn[7]="http://www.ссылка4.ru";
bn[8]="http://картинка4.gif";
Представим
такую ситуацию, что вы обменялись кнопками с 15 сайтами и всё пространство
дизайна сайта заполнено. Что делать ??? Встаёт вопрос об изготовлении
собственной маленькой баннерной сети. Но если вы не программист и не пишете
скрипты сами, то нужно взять скрипт из каких-нибудь архивов скриптов. Не нужно
этого делать, всё сейчас будет рассказано в этой статье.
Все баннерооменные сети используют CGI скрипты, но мы можем обойтись обычным Java скриптом. Приведём его :
<SCRIPT
language="JavaScript">
// <!-- Main
function banners()
{
Это начало скрипта. Дальше идёт перечисление ссылок и соответствующих им
баннеров. Мы для примера берём три ссылки.
this[1]="http://www.ваша_ссылка_01.ru";
- Здесь вы пишете вашу ссылку.
this[2]="http://ваша_картинка_01.gif"; - Здесь указываете путь к графическому файлу.
this[3]="http://www.ваша_ссылка_02.ru";
this[4]="http://ваша_картинка_02.gif";
this[5]="http://www.ваша_ссылка_03.ru";
this[6]="http://ваша_картинка_03.gif";
Количество таких ссылок может быть любым. Но это ещё не весь код. Дальше идёт часть скрипта, которая как раз и отвечает за функцию одмена баннерами. Приведём его :
if ((navigator.appName ==
"Netscape") && (parseInt(navigator.appVersion.substring(0,1))
< 3)) { return(' '); }
var j=(new Date()).getSeconds() % 3;
document.write('<a href=' + this[2*j+1] + ' target=blank><img src=' +
this[2*j+2] + ' border=0 width=468 height=60></a>');
return(' ');
}
// -->
</SCRIPT>
<SCRIPT language="JavaScript">
// <!-- Main
banners();
// -->
</SCRIPT>
Так как мы приводим этот скрипт не
только для профессионалов, но и для новичков, мы не будем разбирать все
переменные скрипта. Следует разобрать только одну переменную "J". Она должна
соответствовать количеству показываемых баннеров. У нас это "3". А
если у вас монго страниц на сайте, следует заключить этот скрипт на отдельную
страницу и включить его на все остальные методом SSI.
Ну а кто не знает что такое SSI, то может прочитать здесь.
Прыгающие символы вокруг
ссылки .
Этот скрипт позволяет оживить ваши ссылки
при наведении на них мышки. Скрипт состоит из двух частей, одну из которых
следует поместить между тегами </HEAD> и <HEAD> , а вторую между тегами <BODY> и </BODY>
|
<HTML> |
В
теге <BODY> в параметрах дескриптора <A> между открывающим и закрывающим тегами вы можете заменить символы ,
предложеные здесь на любые желаемые.
Звуковой сигнал ссылки .
Этот скрипт позволяет озвучивать ссылки.
Можно в звуковом формате WAV вставить любой звук, или голосовое сопровождение.
Работает при наведении на ссылку мыши. Если свернуть окно и развернуть снова,
звук так-же сработает. Скрипт состоит из двух частей, одну из которых следует
поместить между тегами </HEAD> и <HEAD> , а вторую между тегами <BODY> и </BODY>
|
<HTML> |
Cкрипт
сам по себе очень простой и трбует лишь имя вашего звукового файла в формате .wav .
Которое
нужно вставить вместо слова "файл" в первой части скрипта.
А теперь скрипт от постоянного нашего
читателя Djadja Stjopa
Предназначение - немного уменьшить
проблему кирилических кодировок.
Что имеется сейчас: С одной стороны, некоторые
веб-сервера (тот же чат.ру) перекодируют файлы, поэтому задание кодировки
мета-тегом может сделать текст нечитаемым без ручной установки кодировок
пользователем. С другой стороны, нерусские версии нетскейпа без мета-тега всё
пытаются открыть в ISO-8859-1, и несчастный пользователь должен каждый раз для окна
нетскейпа выставлять кодировки вручную.
Можно между тегами <head> и </head> поместить простенький скрипт:
|
<script type="text/java-script"> |
И-эксплорер, естественно, не отреагирует 8-))). А вот
другие браузеры отреагируют, и покажут в нужной кодировке. Если же сервер
перекодировал, тогда так и так придётся пользователю выставлять кодировки
вручную, скрипт ничем не помешает, но и не помешает.
Анимация в HTML 4.0. Динамическое изменение свойств объектов в Internet Explorer 4.0. Технология слоев в Netscape Communicator.
В прошлых статьях мы упоминали о новых возможностях для создания динамичных страничек, предоставляемых новой версией HTML. Пришло время взглянуть на эти возможности подробно. В этой статье мы рассмотрим способы создания анимации и специальных графических эффектов на WEB-страничках при помощи динамического HTML, а также различия в применяемой в этом случае технике для MICROSOFT Internet EXPLORER 4.0 и NETSCAPE COMMUNICATOR 4.X. Начнем, пожалуй, с первого. Поскольку CSS известны еще со времен третьей версии IE, я относительно кратко опишу технику создания анимации для этого броузера, а более подробно остановлюсь на новой технологии слоев NETSCAPE, описываемой во второй части этой статьи. Итак, Internet EXPLORER.
Коньком IE 4.0 является объектная модель документа. Она позволяет изменять существующий HTML-код на лету при помощи любого доступного языка написания сценариев: JAVA, JAVASCRIPT, VBSCRIPT. Начнем с простого - чтобы заставить картинку как-нибудь перемещаться по экрану, вначале нужно ассоциировать ее с каким-либо идентификатором:
<IMG ID="PICTURE" STYLE="POSITION: ABSOLUTE;LEFT: 14; TOP: 100; WIDTH: 64; HEIGHT: 64;Z-INDEX: 5" SRC="PICTURE.JPG">Теперь к этой картинке можно обратиться при помощи, например, JAVASCRIPT, используя следующий код:
DOCUMENT.ALL ('PICTURE')Таким образом можно читать и изменять свойства объекта, например, его местоположение на экране:
DOCUMENT.ALL ('PICTURE').STYLE.LEFT = 215;DOCUMENT.ALL ('PICTURE').STYLE.TOP = 367;Перейдем к действию с картинкой. Заставим ее сжиматься и растягиваться.
Вначале установим ее ширину и высоту (начальное и конечное значения), а также количество и размер шагов, за которые она придет к новому размеру. Для вычисления отношения высоты к ширине используем параметр OTNOSHENIE. Свяжем наш объект с функцией изменения размера:
<SCRIPT LANGUAGE="JAVASCRIPT">UVEL = DOCUMENT.ALL ('PICTURE');OTNOSHENIE = 1; // отношение высоты к ширинеVAR STARTWIDTH = PARSEINT(UVEL.STYLE.WIDTH);VAR STARTHEIGHT = STARTWIDTH * OTNOSHENIE;VAR ENDWIDTH = MATH.ROUND(MATH.RANDOM() * 1024 + 200);VAR NSTEP = MATH.ROUND(MATH.RANDOM() * 20)+ 3; //случайное количество шагов.VAR WIDTHINCREMENT = (ENDWIDTH - STARTWIDTH) /NSTEP; //величина шагаVAR INC = 0;</SCRIPT>Теперь, установив все начальные параметры, используем цикл с количеством шагов NSTEP, добавляя каждый раз WIDTHINCREMENT к ширине UVEL, и WIDTHINCREMENT*OTNOSHENIE к высоте UVEL:
<SCRIPT LANGUAGE="JAVASCRIPT">FUNCTION ZOOM( ) {UVEL.STYLE.WIDTH = MATH.ROUND(STARTWIDTH +(WIDTHINCREMENT * INC));UVEL.STYLE.HEIGHT = PARSEINT(UVEL.STYLE.WIDTH) *OTNOSHENIE;IF(INC <= NSTEP) {INC++;SETTIMEOUT('ZOOM( );', 5);}}</SCRIPT>