Оживи свою страничку
Спецвыпуск хакер, номер #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;
