|
Построй свой домик в Интернете!
Спецвыпуск 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
|
