Хакер №024. Спецвыпуск

       

Хакер №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


 

Содержание раздела