HTML+CSS+JavaScript

Еще раз огромное спасибо. Вы мне очень помогли. На данный момент все работает

Во-первых, Вы не исполнили пункт под номером 1.

Замените <div style="position:relative; height=500px;"> на <div id="iSHELL" style="position:relative; height=500px;">

Во-вторых, в новой строке

var parusL = correctL, parusT = corrrectT, obj = document.getElementById ('iPARUS');

я допустил описку - случайно УТРОИЛ букву r.
Надо correctT (с двумя r).
Исправьте. В двух местах.

В-третьих, у Вас почему-то вместо "точки с запятой" в другой новой строке прописалась запятая.
Исправьте на

limitL = correctL; limitT = correctT; var obj = document.getElementById ('iLIMIT');                  ^                  |              Вот здесь

-----------------------
UPDATE: Кстати, только сейчас заметил - в самой первой функции (под названием funcCOORD) надо изменить строку на

var parusL = parusT = 0, obj = document.getElementById ('iPARUS'); eX -= correctL; eY -= correctT;

- иначе курсор типа MOVE не совпадает с областью картинки с парусником.

Cпасибо. Заменил строки тут - http://freesoftspace.com/new/untitled1.php. Только к сожалению не работает. Движение картинки теперь не работает. Фаирфокс выводит такую ошибку - Ошибка:
corrrectT is not defined
Источник: http://freesoftspace.com/new/untitled1.php
Строка: 16

К сожалению мои познания в javascript пока слабенькие поєтому мне трудно понять как исправить

В общем, если объяснить очень по-простому, то проблема заключается в том, что по уму элементы с абсолютным позиционированием как бы нельзя помещать внутрь элементов с относительным позиционированием.

Но, раз уж Вы собираетесь так делать, то можно это дело откорректировать.

Для этого:

1) Тому элементу, внутрь которого будете помещать три элемента (iLIMIT, iPARUS, iTELEF) - а это у вас может быть див или ячейка таблицы (а в принципе - ЛЮБОЙ блочный элемент) надо присвоить свой уникальный id.
Для выложенного у Вас кода пусть это будет так:

<div id="iSHELL" style="position:relative; height=500px;">

2) Внутрь скриптового блока (положим, непосредственно перед закрывающим тегом </script>) надо поместить следующие пять строк:

onload = function () { var obj = document.getElementById ('iSHELL');    while (obj.offsetParent){correctT -= obj.offsetTop; correctL -= obj.offsetLeft; obj = obj.offsetParent} }

3) Самую первую строку внутри скриптового блока (сразу после открывающего тега <script>) надо дополнить так, чтобы получилось:

var limitL, limitR, limitT, limitB, deltaX, deltaY, correctL = correctT = 0;

4) Внутри двух функций надо найти две одинаковые строки:

var parusL = parusT = 0, obj = document.getElementById ('iPARUS');

, которые обе следует заменить на новые одинаковые:

var parusL = correctL, parusT = corrrectT, obj = document.getElementById ('iPARUS');

5) Ну и напоследок следует найти одну строку

limitL = limitT = 0, obj = document.getElementById ('iLIMIT');

, которую надо заменить на новую:

limitL = correctL; limitT = correctT; var obj = document.getElementById ('iLIMIT');

И всё будет работать как надо.

Cпасибо, что написали. Я выставил тут - http://freesoftspace.com/new/untitled1.php.
То есть моя цель такая чтобы я мог поместить этот код во вложенный див или в таблицу и при движение парус всеравно оставался в пределах дива в котором он должен перемещаться.
Изначально как загрузить документ картинка не смещается. Но когда начать двигать парус он сразу смещается ниже чем нужно.

Не смогли бы Вы выложить Ваш вариант на тот же (или иной) адрес в сети - а то я как-то плохо себе представляю Вашу новую проблему.

[Как-то я поздно заметил обновление в этой теме.]

Ок. Еще раз большое спасибо.

Еще есть вопрос -
В конце я изменил код так -

<div style="position:relative" style="height:200px;"> <br><br> </div> <div style="position:relative"> <div id="iLIMIT"></div> <img id="iPARUS" src="/img/timg/977.png" ondragstart="return false"> <div id="iTELEF"></div> </div>

я поместил дивы в контейнер - <div style="position:relative"> и выше дивов добавил еще один див с высотой на 200px. При таком раскладе когда я начинаю перемещять картинку. Картинка смещяется на 200px пикселов ниже чем она должна быть(то есть появляется смещение от дива с бордером). Скажите пожалуйста, что нужно сделать чтобы перемещалось только в диве с бордером без смещение и при таком раскладе.

[поправлено модератором]

[поправлено модератором]

О. Спасибо.

[поправлено модератором]

Смотрите http://codecenter.awardspace.com/teleparus.html

Примечание: картинки с телефоном и с парусником в фотошопе увеличил до нужных размеров.
Парусник, в принципе, можете не увеличивать, а вот с телефоном - обязательно надо пускать фоном, иначе в Опере срабатывает "неубиваемый" запрет на drag.

И, заметьте, - ни один z-index не пострадалне использовался :-)