Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

  Все выпуски  

Рецепты HTML


Информационный Канал Subscribe.Ru

   Новости сайта www.htmlbook.ru

Добрый день. Как и обещал, сегодня окончание статьи о размещении слоев. Полностью статья доступна по адресу www.htmlbook.ru/dhtml/layers/pos.shtml

Позиционирование слоя

Изменение координат слоя

Для изменения положения слоя на странице с помощью скриптов, используется метод top и left, которые соответственно определяют позицию по вертикали и горизонтали. Начало координат, напоминаю, ведется от левого верхнего угла слоя.

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

  • браузеры поддерживающие DOM (Document Object Model), используют метод document.getElementById("knob").style.top;
  • Internet Explorer - document.all["knob"].style.top;
  • Netscape 4 работает с тегом LAYER - document.layers["knob"].top.

Ниже, в примере 3, показывается, как изменять положение слоя случайным образом.

Пример 3. Изменение координат слоя

<html>
<head>
<script language="JavaScript">
  NC = (document.layers);
  IE = (document.all);
  DOM = (document.getElementById);

function catchButton() {
  newPosX = Math.round(Math.random()*400 - 200);
  newPosY = Math.round(Math.random()*200 - 100);

if (NC) {
  document.layers["knob"].top = newPosY;
  document.layers["knob"].left = newPosX;
}

if (DOM) {
  document.getElementById("knob").style.top = newPosY;
  document.getElementById("knob").style.left = newPosX;
}

if (IE) {
  document.all["knob"].style.top = newPosY;
  document.all["knob"].style.left = newPosX;
}
}
</script>
</head>

<body>
<div id="knob" style=""xposition:" relative; z-index: 10">
<a href=# onMouseOver="catchButton()"><img src="button.gif" border=0></a>
</div>
</body>
</html>

Результат действия примера приведен ниже.

Новые координаты слоя выбираются случайно, в пределах от -200 до +200 по горизонтали и от -100 до +100 по вертикали. Отсчет идет от начально заданного положения слоя, поэтому тип позиционирования position: relative для слоя следует указывать обязательно, без этого программа работать не будет.


Рекомендую подписаться на рассылку:
CenterINet - все для начинающих и опытных web мастеров
Всё о Photoshop

Всё из мира графического редактора Adobe Photoshop. Еженедельно и только для вас в рассылке последние новости и обновления ресурса http://psd.eserver.ru. Не пропустите десятки увлекательных статей о Photoshop и компьютерной графике!

Новичку, интересующемуся, профессионалу!

 

  Разделы сайта
 
Создание сайта
  HTML
  CSS
  Графика
  Дизайн
  Инструментарий
  Справочная информация
  Шаблоны
  Форум

  Подписка на новости
  Введите ваш e-mail:


  Помощь
  Не знаете с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное