Оживи свою страничку

Спецвыпуск хакер, номер #002, стр. 002-014-4

.newID{font-size: 30px;

color: green}

</STYLE><BODY>

Тут тебе должно быть все понятно.

<table><tr><td width="250">

Создаем таблицу, чтобы сохранить форматирование страницы.

<DIV onMouseOver="this.className='newID'; Description.innerText='Журнал Хакер'"

onMouseOut="this.className=''; Description.innerText=' '" >

<a href="http://www.xakep.ru">Xakep</a></DIV>

В теге <div> создаем текстовый объект, который будет реагировать на наведение мыши и менять текст описания в идентификаторе "Description", который находится дальше по тексту страницы.

</td><td rowspan="2">

<h2><DIV ALIGN=RIGHT ID="Description"></DIV></h2>

А вот и он. Описание и содержание этого тега меняется в зависимости от того, на какую из ссылок навел курсор юзверь.

</td></tr><tr><td>

<DIV onMouseOver="this.className='newID'; Description.innerText='Новости от AnyNews'"

onMouseOut="this.className=''; Description.innerText=' '">

<a href="http://www.anynews.agava.ru">AnyNews</a></DIV>

</td></tr></table>

А это второй пункт меню. Как видишь, чтобы создать такое меню, не требуется каких-либо особых знаний программирования и секретных технологий НАСА и ФСБ. Чтобы добавить еще один пункт меню, достаточно создать еще один объект (между тегами <div>).

Теперь мы сделаем картинку, которая будет реагировать на наведение мыши и меняться на другую. Если несколько таких картинок объединить вместе, то может получиться отличное меню:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

image1 = new Image();

image1.src = "ms_sux1.gif";

image2 = new Image();

image2.src = "ms_sux2.gif";

Вначале загружаем необходимые картинки.

function change(x,y)

{

if (document.images)

document.images[x].src = eval(y+".src");

}

</script>

А эта функция будет менять местами картинки, имена которых мы передали в параметрах.

</HEAD>

<BODY>

<IMG SRC="ms_sux1.gif" NAME="kartinka" OnMouseOver="change('kartinka','image2')"

OnMouseOut="change('kartinka','image1')">

</BODY>

А вот этой картинке мы дали имя "kartinka" и добавили два действия. И ВСЕ! Очень просто.

Я ХАЦКЕР!

Пусть все узнают, что ты хацкер! Что для этого надо? Да ничего особенного - заставь текст ("Я ХАЦКЕР!") летать за курсором мыши по твоей страничке! Давай посмотрим, как это делается:

<html><body onLoad="setHandlers()">

При загрузке страницы выполнится JavaScript функция с именем "setHandlers()".

<script>

ex=100;

ey=100;

Устанавливаем начальное положение надписи на экране в координатах (100,100).

function myhandler(e)

{ex=e.pageX; ey=e.pageY;

return routeEvent(e);

}

function moveit()

{dy=ey-y0-20; dx1=ex-x0-20; dx2=ex-x0-60; r=Math.sqrt(dx1*dx1+dy*dy);

if(r<20) r=20

dx1=dx1*10/r+x0+10; dy1=dy*10/r+y0+10; r=Math.sqrt(dx2*dx2+dy*dy);

if(r<20) r=20

dx2=dx2*10/r+x0+50; ae.left=x0; ae.top=y0;

}

function setHandlers()

{y0=document.all.cur.style.pixelTop; x0=document.all.cur.style.pixelLeft; ae=document.all.cur.style;

realx=x0+0.1;realy=y0+0.1;moveall();

}

function moveall()

{ realx+=(ex-realx)*0.1; realy+=(ey-realy)*0.1;

Назад на стр. 002-014-3  Содержание  Вперед на стр. 002-014-5

загрузка...
Cпец Хакер #075Cпец Хакер #074Cпец Хакер #073Cпец Хакер #072Cпец Хакер #071Cпец Хакер #070Cпец Хакер #069Cпец Хакер #068Cпец Хакер #067Cпец Хакер #066Cпец Хакер #065Cпец Хакер #064Cпец Хакер #063Cпец Хакер #062Cпец Хакер #061Cпец Хакер #060Cпец Хакер #059Cпец Хакер #058Cпец Хакер #057Cпец Хакер #056Cпец Хакер #055Cпец Хакер #054Cпец Хакер #053Cпец Хакер #052Cпец Хакер #051Cпец Хакер #050Cпец Хакер #049Cпец Хакер #048Cпец Хакер #047Cпец Хакер #046Cпец Хакер #045Cпец Хакер #044Cпец Хакер #043Cпец Хакер #042Cпец Хакер #041Cпец Хакер #040Cпец Хакер #039Cпец Хакер #038Cпец Хакер #037Cпец Хакер #036Cпец Хакер #035Cпец Хакер #034Cпец Хакер #033Cпец Хакер #032Cпец Хакер #031Cпец Хакер #030Cпец Хакер #029Cпец Хакер #028Cпец Хакер #027Cпец Хакер #026Cпец Хакер #025Cпец Хакер #024Cпец Хакер #023Cпец Хакер #022Cпец Хакер #021Cпец Хакер #020Cпец Хакер #019Cпец Хакер #018Cпец Хакер #017Cпец Хакер #016Cпец Хакер #015Cпец Хакер #014Cпец Хакер #013Cпец Хакер #012Cпец Хакер #011Cпец Хакер #010Cпец Хакер #009Cпец Хакер #008Cпец Хакер #007Cпец Хакер #006Cпец Хакер #005Cпец Хакер #004Cпец Хакер #003Cпец Хакер #002Cпец Хакер #001