Вопрос новичка по DIV
 

Прошу помощи местных гуру :help:
Сам яваскрипт только начал изучать.

Есть блок div с id="test". Блок ограничен 200 px по вертикали и горизонтали. Внутри находится картинка. Как сделать так, что бы при нажатии кнопки мыши, можно было перемещать размещение этой картинки внутри блока? Как на картах гул мэпс получается. Какртинка при этом больше самого блока.

HTML:

<div id="test">
     <img src="…" alt="…" />
</div>

CSS:

#test {
position: relative;
overflow:hidden;
width: 200px;
height: 200px;
}
#test img {
position:absolute;
top: …px;
left: …px;
}

По событию mousedown на #test начинаешь процесс, по событию mousemove перемещаешь верхний левый угол изображения на соответствующие координаты, по событию mouseup прекращаешь действия.

я тоже начинающий, сталкивался с подобной задачкой, которую так как хотел не решил, заключалась она в следущем, при нажатии на картинку и удержинии кнопки мыши перетаскивать ее по экрану, при этом возникло две проблемы: при перетаскивании открывалось новое окно с этой картинкой и вторая-mousemove изменяло top-left,но на экране это никак не отображалось; первую решил изменяя returnValue для ondragstart, вторую не смог, может кто объяснит?:)

Код где?

кода уже нет, поэтому взял то что писали вверху, пока писал понял где ошибся:victory:
может кому понадобится

<div id=test>
  <img src="picture.jpg" onmousedown='ob=this;move()'>
</div>
<style>
#test {
position: relative;
overflow:hidden;
width: 200px;
height: 200px;
border:solid red
}
#test img {
position:absolute;
}
</style>
<script>
var ob,flag=false//ссылка на картинку;начинает и прекращает перемещение
var mx,my//координаты мыши отн.в.п.угла картинки
function move(){
//задание обработчиков событий
  ob.offsetParent.onmouseout=function(){flag=false}//выход за границы test
  ob.onmouseup=function(){flag=false}//отпускание кнопки
  ob.ondragstart=function(){return false}//отмена открытия окна
  ob.onmousemove=function(){ 
    if(!flag)return//холостой ход
    ob.style.left=event.clientX-mx//перемещение
    ob.style.top=event.clientY-my
  }
  with(ob.offsetParent){//test-объект по умолчанию
  //т.к.отсчет от<div>(плавающий),а не от угла окна,прибав. эту разность 
  mx=event.offsetX+offsetLeft+clientLeft
  my=event.offsetY+offsetTop+clientTop
  }
  flag=true//разрешить перемещение
}
</script>

буду рад выслушать замечания

можешь еще почитать http://javascript.ru/ui/draganddrop

да, мне еще читать и читать, такое впечатление что мой самоучитель из каменного века