| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #26, ЯНВАРЬ 2003 г. |
TIPS OF WEB - Сайт перед Рождеством
Vadias
Спецвыпуск Xakep, номер #026, стр. 026-106-2
</tr>
<tr>
<td height="80px" bgcolor="#FFFFFF" valign="bottom">
<div id="deda" style="position: relative"><a href="main.htm" style="cursor:crosshair"><img id="imaj" src="" border="0"></a></div>
</td>
</tr>
</table>
</body>
TIPSA 6
В интересах юзабельности рекомендую все же поставить на эту страницу также обычную ссылку на main.htm, потому что, во-первых, не все захотят стрелять по старику, а во-вторых, не у всех браузер IE, поддерживающий эту игру :).
TIPSA 7
Итак, юзерок благополучно прошел твою первую "игру" :). Что ж, постараемся не разочаровать его далее. Надо внести некоторую живость в страницу. В левый верхний угол добавим персонажа - наиболее актуален сейчас Санта Морозович aka Дедус Клаус. Вот что можно замутить: в зависимости от положения курсора мыши персонаж будет вращать глазами.
TIPSA 8
Есть готовый скрипт, где глаза вращаются на 360 градусов (ищи на пагах по JavaScript), но его код слишком замороченный. Зачем мучиться - выберем упрощенный вариант: если курсор будет находиться справа от старика, он будет смотреть вправо, если снизу - то вниз, а если между этими двумя областями - то по диагонали. Очевидно, сначала необходимо создать три соответствующих картинки. Я назвал их east.gif, s-east.gif и south.gif.
TIPSA 9
Скрипт, как обычно, запрячем в HEAD. Весь он состоит из одной функции:
<script>
function seen() {
var mx=event.x; //объявляем переменную, которой присваивается значение положения курсора по горизонтали.
var my=event.y; //объявляем переменную, которой присваивается значение положения курсора по вертикали.
if (mx>80 && my>80) { //здесь определяется самая большая область, глаза смотрят по диагонали.
eye.src="s-east.gif";
}
else if (mx<80 && my>80) { //определяется область, находящаяся под изображением; глаза смотрят вниз.
eye.src="south.gif";
}
else { //все остальное, включая область самой картинки; глаза смотрят вправо.
eye.src="east.gif";
}
}
</script>
TIPSA 10
Не забудь в BODY воткнуть функцию, работающую при движении мыши. Вставляем в документ картинку с id="eye", по умолчанию это будет east.gif.
<body topmargin="0" leftmargin="0" onmousemove="seen()">
<img id="eye" src="east.gif">
</body>
TIPSA 11
Только этого мало! Пусть наш герой не только глядит, но и бубнит, причем со смыслом. Он будет обращаться к юзеру по имени! Сделаем так, чтобы при загрузке этой страницы вылетало окно сценария с запросом имени и полем для ответа. Но сначала нужны некоторые картинки и теги, чтобы Дед Мороз говорил, как в комиксах, "облачком" изо рта :).
TIPSA 12
Для начала нужно подготовить некоторые графические элементы. Это три картинки, ведущие в разные разделы ("открытки", "фотки" и "истории"), и еще картинка с треугольничком для комиксного облачка. Напоминаю, ты можешь посетить страницу по адресу, указанному в начале статьи, сохранить ее и рассмотреть все файлы вблизи.
TIPSA 13
Не забудь добавить этот скрипт к предыдущему, чтобы все работало одновременно (и глаза, и бубнилка).