Вопросы и задания
1. Создайте переливающийся заголовок на одной из своих страниц.
Большинство web-дизайнеров предпочитают каким-либо образом выделять ссылки в случае наведения на них мышкой. Это может быть изменение цвета, подчеркивание либо еще какой-нибудь вариант изменения текста. Для этого можно воспользоваться, например, свойством Text-decoration входящим в блок style. Его значения могут быть, например, такими:
underline — подчеркивание;
line-through — зачеркивание;
overline — линия над строкой.
2. Воспользуйтесь каким-либо способом выделения текста и сделайте так, чтобы ссылки на вашей странице видоизменялись при наведении мышки.
Лабораторная работа №18 «Навязчивая кнопка»
Одной из наиболее впечатляющих возможностей, которые получили разработчики сайтов после внедрения каскадных таблиц стилей, явилась полная свобода в расположении элементов оформления страницы. Так, текст можно разместить непосредственно на рисунке, который, в свою очередь, может перекрываться другой иллюстрацией. Причем расположение объектов можно динамически менять, используя язык JavaScript.
В качестве примера мы займемся улучшением странички, на которой была сделана лабораторная работа №11 — “Слайд-шоу”. Как вы помните, для удобства пользователей мы поместили на эту же страничку пару кнопок, с помощью которых можно останавливать, а затем снова запускать автоматический просмотр фотографий.
Но если исходить из элементарного чувства справедливости, представляется не совсем честным позволять посетителю останавливать работу программы, над которой мы усердно и плодотворно работали. Поэтому хотелось бы ненавязчиво напомнить гостю о необходимости повторного запуска программы показа фотографий. А что может быть лучше для этого, как не ”приклеивание” к указателю мышки кнопочки “Пуск”?
Итак, первое, что мы сделаем, расположим кнопки управления слайд-шоу над картинкой (см. рис. 26):
Рис. 26. Кнопки управления показом перемещены в начало страницы
Поскольку мы собираемся изменять свойства одной из кнопок, ей присвоено имя. Кроме того, для динамического передвижения какого-либо объекта необходимо задать ему свойство position из блока style. В нашем случае оно принимает значение absolute. То есть его координаты будут отсчитываться от верхнего левого угла открытого документа. Обратите внимание на двоеточие, отделяющее название свойства и его значение.
<h1> Лабораторная работа №18 <br>
Добро пожаловать! <br>
Управление слайд-шоу:
<input type=”button” value=”Стоп!” onClick=”period=100000’>
<input type=”button” value=”Пуск!” onClick=”period=2000; slide()” style=”position: absolute” id=”mv”> <br>
<h2 id=”md”>
Хочешь ли ты приобщиться к мудрости?<br>
Кроме того, мы предполагаем использовать новое для вас событие onmousemove Поскольку оно происходит при любом перемещении указателя мышки по HTML-документу, заказывать его обработку нужно в теге <body>:
<body background=”fon1.gif” onLoad=”slide()” onmousemove=”move()”>
Теперь более подробно о том, чего же мы хотим. При нажатии кнопки “Стоп” другая кнопка — должна “приклеиться” к указателю мышки и следовать за ним до тех пор, пока ее не нажмут. Выглядеть это может примерно так (см. рис. 27):
Рис. 27. Кнопка, к указателю мышки
Несмотря на кажущуюся сложность, программа, реализующая такой незабываемый эффект, чрезвычайно проста. Для того чтобы ее написать, необходимо лишь знать, каким образом можно задать положение объекта. Это делается следующими операторами:
mv.style.pixelTop=event.y-10;
mv.style.pixelLeft=event.x-10;
Обратите внимание на метод event, который выдает координаты мышки как по оси абсцисс, так и по оси ординат. Напоминаем, что началом координат на мониторе считается правый верхний угол, причем ось OY направлена вниз.
Кроме того, очень нелишне вспомнить о глобальном параметре, который мы меняем, нажимая кнопки “Старт” и “Пуск”. Это — переменная period. Значит, нам нужно менять местоположение объекта только в том случае, если period=100000.
Вопросы и задания
1. Напишите и отладьте программу move.
2. Зачем в программе из текущего значения координат вычитается 10?
3. Попробуйте определить относительное (relative) позиционирование объекта (вместо использованного absolute). Что из этого получается? Можете ли вы сформулировать отличия этих двух типов позиционирования?
4. А все же, зачем мы перенесли кнопки управления слайд-шоу наверх? Попробуйте вернуть их на старое место и посмотрите, что получится. Как вы можете объяснить получившийся эффект?
Лабораторная работа №19 «Слоеная страничка»
Если вы помните, в лабораторной работе №5 мы создали интерактивный рассказ о том, как провели лето. Но наверняка это не последнее, о чем вы хотели бы рассказать. Интересные поездки, экскурсии, походы, школьные праздники... Согласитесь, было бы здорово, если бы в HTLM-виде постепенно создавалась хроника вашей жизни.
Но, как вы помните, основная идея интерактивного рассказа как раз заключалась в не очень большом количестве текста и большом количестве фотографий. Каждый раз создавать для рассказа новую страничку, может, и не стоит. А плодить рассказы на одной страничке один за другим не очень-то оригинально.
Очень красивое решение можно найти, воспользовавшись новым тегом <div> и его свойствами, ставшими доступными после принятия стандарта CSS2. Этот тег... Впрочем, давайте сначала посмотрим, что же мы хотим получить.
Итак, немного преобразуем страничку с рассказом, поместив его в самом низу (см. рис. 28):
Рис. 28. Изменения на странице
Далее мы хотим сделать следующее.
1. Возле надписи “Мое лето” появляется надпись “Поход на Соколиный камень”.
2. Эти две надписи, в свою очередь, тоже приобретают новые свойства. Более конкретно, в случае наведения мышки на любую из них меняется не только картинка, но и весь рассказ целиком. Скажем, так, как это изображено на рис. 29:
Рис. 29. Вид странички после наведения указателя мышки на второй заголовок
При желании здесь же можно расположить еще несколько заголовков, каждый из которых проявит новый интерактивный рассказ.
Хотя именно заголовки в первую очередь видны на странице, мы все же начнем с рассказов. Вот как они выглядят на странице:
<div id=”text1” style=”position: absolute; left: 30; top: 650; visibility: visible”>
<center>
<img id=”ris1” src=”ex0.jpg” height=”500” onmouseover=”zoom()” onmouseout=”antizoom()”> <br>
</center>
<p align="justify"> Этим летом <font color=”red” onClick=”pict(1)”> я съевдил </font >в Археологическую экспедицию. Первые дни мы устанавливали <font color=”red” onClick=”pict(2)”> палатки </font>и строили <font color=”red” onClick=”pict(3)”> столовую </font>.
…
</p>
</div>
<div id=”text2” style=”position: absolute; left: 30; top: 650; visibility: hidden”>
<center>
<img id=”ris2” src=”sok0.jpg” height=”500” onmouseover=”zoom()” onmouseout=”antizoom()”> <br>
</center>
<p align="justify"> В сентябре мы побывали на <font color=”red” onClick=”pict1(12)”> Соколином камне </font>. Это очень <font color=”red” onClick=”pict1(13)”> красивые камни </font>, расположенные на берегу небольшой <font color=”red” onClick=”pict1(14)”> речушки Северки </font>.
…
</p>
</div>
Многоточием отмечено продолжение рассказов. С ним, надеемся, у вас не возникнет проблем. А вот жирным шрифтом выделены новые тети <div>. Их вполне можно рассматривать как некие блоки, в которые заключены другие элементы оформления страницы. В нашем случае это картинка и рассказ, размеченные тегами <font>. Как и любой другой элемент странички, тег <div> поддерживает свойства из блока style.
В частности, уже известное вам свойство position, свойства left и top, указывающие местоположение верхнего левого угла блока относительно начала странички, и, наконец, свойство visibility, принимающее два значения — visible (видимый) и hidden (скрытый).
Обратите внимание, что у обоих блоков <div> указаны совершенно одинаковые координаты размещения на странице. Это означает, что если бы один из них не был скрыт, мы получили бы наложение друг на друга рассказов и картинок.
Итак, легко понять, что единственное действие, которым должны управлять заголовки, — это изменение видимости наших блоков. Так, при наведении мышки на слова “Поход на Соколиный камень” первый блок должен становиться невидимым, а второй — видимым. Слова “Мое лето” работают наоборот: Делают первый блок видимым, а второй — невидимым, возвращая состояние, которое существует при загрузке страницы.
<b onMouseOver=”sloj(1)”> Мое лето</b>
<b onMouseOver=”sloj(2)”> Поход на Соколиный камень</b>
Выше вы видите текст, обеспечивающий вызов соответствующих программ. Больше на HTML-страничке ничего делать не надо. Перейдем к программе sloj(k). В ней мы предусмотрели передачу параметра, определяющего, на каком именно заголовке находится мышка. После этого достаточно всего лишь воспользоваться стандартной конструкцией switch и написать нечто подобное:
Function sloj(i)
{
switch(i)
{ case 1:
text1.style.visibility=”visible”;
text2.style.visibility=”hidden”;
break;
case 2:
text1.style.visibility=”hidden”;
text2.style.visibility=”visible”;
break;
}
}
Не составляет никакого труда в дальнейшем на этом же самом месте разместить и следующий рассказ. Правда, функцию sloj(k) придется изменить.