Перетаскивание слоя
Может название и звучит не так интересно, но в эффекте Drag Layer скрываются удивительные возможности. С его помощью посетитель может перетаскивать слои на Web-странице, как окна в Windows, как карты в компьютерном пасьянсе, как… остальное можете додумать сами. Горизонты безграничны — можете создавать головоломки (pazzles) для развлечения посетителей или придумывать различные игры, использующие принцип перетаскивания объектов. Можно смело сказать, что эффект Drag Layer — это самый игровой эффект из стандартного комплекта Dreamweaver.
В качестве примера, рассмотрим простенький игровой прием — забрасывание баскетбольного мяча в корзину (рис. 15.6). Посетитель странички может перетаскивать мяч по всей странице. Когда он поместит его в центр мишени, изображающей, по моей задумке, корзину, то будет перемещен на новую страницу, где его торжественно занесут в таблицу рекордов, увенчают лавровым венком и прославят на весь Интернет.
Для начала был создан слой, в который затем поместили графическое изображение мяча в формате GIF. Фон у картинки был прозрачным, так что ее видимые контуры полностью совпадали с мячом.
После этого я щелкнул на свободном месте страницы, чтобы сделать активным тег <body>. Функция, которую выполняет этот эффект, требует своего запуска до начала перетаскивания слоя. Хорошим решением является запуск эффекта сразу при загрузке страницы. Поэтому-то он и был прикреплен к тегу <body>, а стартовым событием для него было назначено onLoad — загрузка страницы.
Сделав активным тег <body>, я выбрал эффект Drag Layer на панели Behaviors. В первой вкладке диалогового окна настроек, Basic, можно устанавливать следующие параметры.
□ Layer — нужный слой выбирается из раскрывающегося списка. Для облегчения задачи выбора, рекомендуется заранее дать слою какое-нибудь запоминающееся имя, которое будет показано в этом списке.
|
Рис. 15.6. Настройка эффекта Drag Layers (вверху) и игровой прием — "забрасывание мяча" на его основе (внизу) |
□ Movement — в раскрывающемся списке два варианта: Unconstrained — ничем не ограниченное движение слоя по странице и Constrained — ограниченное в заданных рамках. Если вы выберете второй вариант, то необходимо будет задать координаты области, внутри которой дозволено перемещать слой. Координаты могут быть только положительными или равными нулю и задаются в пикселах относительно левого верхнего угла самого слоя. В нашем примере было выбрано неограниченное перемещение слоя — Unconstrained.
□ Drop Target — здесь необходимо указать координаты мишени, куда будет "сбрасываться" слой. Поле Left определяет координату левого, а поле Тор — верхнего угла мишени. Если нажать кнопку Get Current Position, то координаты мишени будут взяты как текущие координаты слоя. В примере в качестве мишени использовался слой с размещенным в нем изображением круга. Чтобы не высчитывать координаты вручную, перед созданием эффекта я предварительно разместил слой в Dreamweaver точно над мишенью, а затем в настройках эффекта нажал кнопку Get Current Position. Конечно, после того, как все было настроено, слой с мячом был передвинут в Dreamweaver обратно в исходную позицию — где-то вне мишени.
□ Snap if Within — в поле устанавливают "притяжение" перетаскиваемого слоя к мишени в заданном радиусе. Если уж вы затеяли игры с мишенью, то обязательно поставьте здесь хоть пару десятков пикселов — иначе посетители страницы будут закидывать мячи в корзину целую вечность, пытаясь совместить передвигаемый слой с мишенью пиксел к пикселу.
Попытка попасть мышью в крохотную точку размером в один или несколько пикселов при минимальных подсказках со стороны компьютера часто называется пиксел-хантингом, от английского слова hunting — "охота". Охота за пикселом вовсе не является таким увлекательным занятием, как можно подумать, скорее наоборот — в большинстве случаев является серьезным недочетом в интерфейсе программы или web-страницы.
Приведенных параметров на вкладке Basic достаточно, чтобы слой можно было просто перетаскивать и "бросать" на заданную цель. Но для того, чтобы удачный бросок приводил к какому-то действию, необходимо обратиться ко второй вкладке окна, Advanced.
□ Drag Handle — здесь задается область, за которую можно уцепиться мышью, чтобы перетаскивать слой. Первый вариант, Entire Layer, задает в качестве такой области весь слой, что является предпочтительным вариантом в большинстве случаев. Второй вариант, Area Within Layer, позволяет указать область, которая и только которая будет реагировать на попытки перемещения слоя. К примеру, это может быть заголовок окна, созданного в Dreamweaver с помощью таблиц и изображений. Параметры области: L — левая граница, Т — верхняя граница, W — ширина, Н — высота. Все в пикселах, точка отсчета — от левого верхнего угла самого слоя.
□ While Dragging — установите флажок, чтобы слой во время перемещения поднимался выше всех остальных. Если снять флажок, то при перемещении слой может заходить за другие слои, расположенные выше него. Если флажок все же установлен, в раскрывающемся списке Bring Layer to Front, then определите судьбу слоя после того, как перемещение будет закончено: Leave on the Top — оставить слой выше всех остальных, Restore z-index — вернуть его на тот же уровень, на котором он был раньше.
□ Call JavaScript — здесь можно ввести код JavaScript, который вы хотите, чтобы исполнялся во время перетаскивания слоя.
□ When Dropped: Call JavaScript — в это поле необходимо ввести код JavaScript, который будет выполняться каждый раз, когда посетитель закончит передвигать слой.
□ Only if snapped — обязательно установите флажок, если вы хотите, чтобы код JavaScript, заданный для предыдущего параметра, выполнялся только тогда, когда передвижения слоя закончилось над заданной мишенью (в заданных границах).
В примере с перетаскиванием мяча для поля When Dropped: Call JavaScript была использована собственноручно написанная автором функция gotoURL. Как выяснилось, использование заранее объявленных функций является оптимальным решением, так как при попытке ввести в это поле развернутый код JavaScript, использующий кавычки и специальные символы, неизменно приводил к ошибкам. Поэтому развернутый код желательно определять в виде функции, размещаемой внутри тегов <script> </script> в исходном коде страницы. Как это было сделано в рассматриваемом примере с мячом:
<script language="JavaScript" type="text/JavaScript">
<!–
function gotoURL() { window.location.href = "anima.htm"; }
//–>
</script>
Ter <script>, если вы используете динамические эффекты Dreamweaver, уже должен находиться в исходном коде страницы внутри тега <head> Поэтому,
скорее всего, достаточно лишь разместить внутри него строчки примера, начинающиеся с function и заканчивающиеся фигурной скобкой.
В этом примере функция gotoURL выполняет переход браузера на страницу anima. htm. В результате, когда мяч попадает на мишень, эта функция срабатывает и открывает посетителю страницу с призовым содержанием (а каким, не скажу!). Вы можете смело использовать данную функцию, подставить вместо anima.htm нужный вам адрес и создать свою собственную игру с мячом, с камнем или с чем-нибудь еще, что нужно перетаскивать и бросать на выбранную мишень.