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

Спецвыпуск 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

ttfb: 2.8369426727295 ms