Построй свой домик в Интернете!

Спецвыпуск Xakep, номер #015, стр. 015-010-11

- создание сообщений в виде отдельных диалоговых окон;

- анимированные изображения, в том числе анимированное меню (описываются события для действий крысы);

- определение используемого браузера и настройка странички под него;

- определение используемых плугинов;

- всплывающие меню или подсказки;

- счетчики;

- разнообразные эффекты;

- и куча всего остального...

Достаточно сказать, что ни одна страничка, кроме совсем ламерских :), не обходится без использования Java-Script. Хватит трепаться, смотри примеры. В первом я покажу, как сделать удобную навигацию по твоей паге, а во втором - как сделать анимированное меню. Оба примера я прокомментирую, и на своей страничке ты сможешь без труда их использовать.

Начнем с навигации по сайту. Когда ссылок на паге очень много, обычно делают карту сайта. Но можно сделать навигацию и с помощью Java-Script. Используй обычный раскрывающийся список, добавив обработчик событий на Java-Script. Вот что получится в результате:

<html>

<head><title>Пример использования Java-Script для Спецвыпуска Хакера</title></head>

<body>

<br><br>

<form>

      <select onChange="window.open(this.options[this.selectedIndex].value,'_top')">

<option selected> Меню

<option>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<option value="about.html"> 1. Я

<option value="tuzik.html"> 2. Мой Тузик

<option value="murzik.html"> 3. Мой Мурзик

<option value="my_girl.html">           3.1. Моя девушка

<option value="my_girl_about.html">                       - в детстве

<option value="my_girl_normal.html">                       - в штанах

<option value="my_girl_nude.html">                       - без штанов

</select>

</form>

</body>

</html>

Обработчиком событий тут является onChange, и реагирует он на выбор любого пункта из раскрывающегося списка. Функция window.open() открывает новое окно. Параметр this.options[this.selectedIndex].value будет иметь значение value выбранного пункта, к примеру, если выбрать "Моя девушка -> в штанах", то value примет значение my_girl_normal.html. Обработчик событий выполнит переход по этой ссылке, открыв содержимое в том же окне, так как стоит параметр _top.

Если же менюшек не много, но хочется их оживить, то с помощью Java-Script можно их анимировать. Нужно всего лишь добавить обработчик событий, который будет реагировать на мышь (активировать и дезактивировать пункт меню). Для того чтобы все работало быстро, сделаем предварительную загрузку картинок в заголовке твоей паги. Получится следующее:

Назад на стр. 015-010-10  Содержание  Вперед на стр. 015-010-12

загрузка...
Cпец Хакер #075Cпец Хакер #074Cпец Хакер #073Cпец Хакер #072Cпец Хакер #071Cпец Хакер #070Cпец Хакер #069Cпец Хакер #068Cпец Хакер #067Cпец Хакер #066Cпец Хакер #065Cпец Хакер #064Cпец Хакер #063Cпец Хакер #062Cпец Хакер #061Cпец Хакер #060Cпец Хакер #059Cпец Хакер #058Cпец Хакер #057Cпец Хакер #056Cпец Хакер #055Cпец Хакер #054Cпец Хакер #053Cпец Хакер #052Cпец Хакер #051Cпец Хакер #050Cпец Хакер #049Cпец Хакер #048Cпец Хакер #047Cпец Хакер #046Cпец Хакер #045Cпец Хакер #044Cпец Хакер #043Cпец Хакер #042Cпец Хакер #041Cпец Хакер #040Cпец Хакер #039Cпец Хакер #038Cпец Хакер #037Cпец Хакер #036Cпец Хакер #035Cпец Хакер #034Cпец Хакер #033Cпец Хакер #032Cпец Хакер #031Cпец Хакер #030Cпец Хакер #029Cпец Хакер #028Cпец Хакер #027Cпец Хакер #026Cпец Хакер #025Cпец Хакер #024Cпец Хакер #023Cпец Хакер #022Cпец Хакер #021Cпец Хакер #020Cпец Хакер #019Cпец Хакер #018Cпец Хакер #017Cпец Хакер #016Cпец Хакер #015Cпец Хакер #014Cпец Хакер #013Cпец Хакер #012Cпец Хакер #011Cпец Хакер #010Cпец Хакер #009Cпец Хакер #008Cпец Хакер #007Cпец Хакер #006Cпец Хакер #005Cпец Хакер #004Cпец Хакер #003Cпец Хакер #002Cпец Хакер #001