Хакер №024. Спецвыпуск
TIPS OF THE WEB
Спецвыпуск Xakep, номер #024, стр. 024-106-2
<img src="nazad.gif" onclick="nazad()">
Кнопку "Стоп" вот так:
<img src="stop.gif" onclick="stop()">
Кнопку "Вперед" вот так:
<img src="vpered.gif" onclick="vpered()">
Теперь надо подготовить для них функции JavaScript. Между тегами <head> и </head> вставляй:
<script>
function nazad();
{
history.go(-1)
}
function vpered()
{
history.go(1);
}
function stop()
{
window.top.down.location.replace('http://coolsite.ru/stop.htm');
}
</script>
Первые две гоняют юзверя по "хистори" вперед (1) и назад (-1), а последняя грузит с твоей паги веселую html'ку с пожеланиями приятного отдыха и глубоких раздумий.
6. Чтобы не резать панельку на отдельные кнопки (а то переедет еще чего-нибудь), можно заюзать тег <map>. Делается это так: вместо отдельных картинок-кнопок nazad, vpered и stop мы пихаем в таблицу панельку buttonz.gif так:
<IMG SRC="buttonz.gif" NAME="NAVI0" WIDTH=243 HEIGHT=72 BORDER=0 usemap="#NAVI0Map">
В теге указываем имя, размеры и идентификатор карты.
А после таблицы прописываем саму карту:
<map name="NAVI0Map">
<area shape="rect" coords="159,7,216,65" onclick="vpered()">
<area shape="rect" coords="92,7,154,65" onclick="stop()">
<area shape="rect" coords="30,7,87,65" onclick="nazad()">
</map>
Shape="rect" показывает, что активная область - прямоугольник, а в coords задаются координаты левого верхнего и правого нижнего углов активной области. На цифры данного примера внимания не обращай - мапы прекрасно готовятся в редакторе Dreamweaver (и не только), где ты обводишь нужную область визуально.
7. Настала очередь адресной строки. Вставь ее в нужное место таким макаром:
<form name="form1" method="post" action="">
<input type="text" name="urla" size=60%>
</form>
Мы создали форму, из которой будем выдирать инфу, которую введет юзер. По-хорошему ее надо бы проверять на корректность, но это гимор - обойдемся. Имя (в данном случае "urla") обязательно. Размер (size) можешь подбирать по своему усмотрению.
Рядом с этой строкой вставь картинку, которая будет кнопкой активации введенного адреса:
<img src="go.gif" onclick="perehod()">
Соответственно, между тегами <head> и </head> вставляем функцию:
<script>
function perehod()
{
var myform=document.form1;
window.top.down.location.replace("http://"+myform.urla.value);
}
</script>
8. Осталось прикрутить нашему браузеру свой собственный курсор. К сожалению, данная фишка поддерживается только ишаком IE 6. Сооруди курсор из подручных материалов (есть такая прога - Microangelo 98, курсоры можно делать в ней), назови его sor.cur и положи в ту же папку, где лежат веб-страницы. После этого во все страницы придется вписать между тегами <head> и </head> такой текст:
<style>
BODY { cursor : url("sor.cur"), pointer; }
A { cursor : url("sor.cur"), hand; }
</style>
9. Если с фантазией туго и сделать свой собственный курсор (а также вставить его в нужную дырку) составляет для тебя проблему, то можешь воспользоваться услугами сайта http://cometzone.cometsystems.com/.
Назад на стр. 024-106-1 Содержание Вперед на стр. 024-106-3
