Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как сделать прокрутку изображения?


Автор: ksicom 29.9.2005, 14:32
Как сделать прокрутку изображения как на maps.google.com?
И к тому же кроссбраузерную?

Автор: Aliance 29.9.2005, 15:14
Прокрутку или увеличение (zoom)?
И вообще там сделано на JAVA кажется...

Автор: ksicom 29.9.2005, 15:37
прокрутку

нет, там не на JAVA

там вроде как-то в IFRAME сделано, а вот как понять не могу.
не понятно, как механизм "двиганья" устроен.
похоже, что документ в iframe много шире отображаемого окошка. Поэтому и кажется, что плавно движется. Но вот куда он подгружает изображения и как собственно устроена прокрутка не понятно...

Автор: Sardar 29.9.2005, 17:06
Цитата(ksicom @ 29.9.2005, 14:37)
не понятно, как механизм "двиганья" устроен.

Цитата(ksicom @ 29.9.2005, 14:37)
нет, там не на JAVA

По моему там не JS, в сорцах не разбирался.
По идее ставишь скролируемый слой overflow: hidden, внутрь ложишь таблицу из картинок на абсолютной позиции, при этом таблица по площади раза в 4 больше площади скролируемого окошка. Двигаем мышой таблицу. Если окошком выходим за границы таблицы, то либо меняем сорцы на картинках и таблицу сдвигаем верёд(может моргать), либо добавляем строки и колонки, старые при этом удаляем(может тормозить).

А вообще задача интересная)

Автор: Burrr 29.9.2005, 21:02
если я не ошибаюсь, то на гугл.мэп при движении картинки возникают пустые области, которые заполняются с пом httpRequest, а для передвижения картинки они кажись используют таблицу, td-шки которой можно изменять и закрывать тем самым части карты.

всё у них выстроено на JavaScript-e

могу и ошибиться smile

Автор: Guest 9.10.2005, 13:43
Вроде как написал.
Собственно вот:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>


<script language="javascript">
<!--

// -----------------------------------------------------------
// Настройки
// -----------------------------------------------------------
// Количество фрагментов по горизонтали и вертикали
  var nx         = 6;
  var ny         = 6;
// Левый верхний географический угол
  var x0Gis      = 0;
  var y0Gis      = 0;
// Ширина и высота единичного фрагмента в геоединицах
  var nWidthGis  = 100;
  var nHeightGis = 100;
// Левый верхний графический угол (относительно x0Vis!!!)
//  var x0         = 100;
//  var y0         = 100;
  var x0         = -100;
  var y0         = -100;
// Ширина и высота единичного фрагмента в пикселях
  var nWidth     = 100;
  var nHeight    = 100;
// Левый верхний угол отображаемого окна (относительно окна браузера!!!)
  var x0Vis      = 30;
  var y0Vis      = 30;
// Ширина и высота отображаемого окна
//  var VisWidth   = 600;
//  var VisHeight  = 600;
  var VisWidth   = 400;
  var VisHeight  = 400;
// -----------------------------------------------------------
// Служебные глобальные переменные
// -----------------------------------------------------------
// Массив для информации по картинкам
  var imgs = new Array();
// Для сохранения координат на стадии Drag
  var xOld = 0;
  var yOld = 0;
// -----------------------------------------------------------
// Инициализация служебной информации
// -----------------------------------------------------------
// Генерим вложенные массивы
  for(ix=0; ix<nx; ix++)
    imgs[ix] = new Array();
// -----------------------------------------------------------
// Обработчик нажатия кнопки мыши
// -----------------------------------------------------------
  function mdown(e) 
    {
    var evt=window.event? window.event: e;
// Если в зоне окошка карты
      if ((evt.clientX >= x0Vis) &&
          (evt.clientX <= (x0Vis+VisWidth)) &&
      (evt.clientY >= y0Vis) &&
          (evt.clientY <= (y0Vis+VisHeight)))
        {
        document.getElementById("Layer1").dragging=true;
        xOld=evt.clientX-imgs[0][0].offsetLeft;
        yOld=evt.clientY-imgs[0][0].offsetTop;
        }
// Снимаем прерывание    
    if (evt.preventDefault)
      { evt.stopPropagation(); evt.preventDefault(); }
    else
      { evt.cancelBubble = true; evt.returnValue = false; }
    return false;
    }
// -----------------------------------------------------------
// Обработчик отпускания кнопки мыши
// -----------------------------------------------------------
  function mup(e)
    {
    var evt=window.event? window.event: e;
    document.getElementById("Layer1").dragging=false;
// Снимаем прерывание    
    if (evt.preventDefault)
      { evt.stopPropagation(); evt.preventDefault(); }
    else
      { evt.cancelBubble = true; evt.returnValue = false; }
    return false;
    }
// -----------------------------------------------------------
// Обработчик передвижения мыши
// -----------------------------------------------------------
  function mmove(e) 
    {
    var evt=window.event? window.event: e;
    var xNew=document.body.scrollLeft + evt.clientX-xOld;
    var yNew=document.body.scrollTop + evt.clientY-yOld;
    var tempimg;

    if(document.getElementById("Layer1").dragging) 
      {
      for (iy = 0; iy < ny; iy++)
        for (ix = 0; ix < nx; ix++)
          {
          imgs[ix][iy].style.left = (xNew+nWidth*ix)+"px";
          imgs[ix][iy].style.top = (yNew+nHeight*iy)+"px";
          }
// Если левый край второго слева и сверху фрагмента вышел за левую
// графическую границу
      if (imgs[1][1].offsetLeft < x0)
        {
// По всем строкам
        for (iy = 0; iy < ny; iy++)
          {
// Сохраняем крайний левый элемент
          imgs[0][iy].src="";
      tempimg = imgs[0][iy];
// Сдвигаем строку влево
      for (ix = 0; ix < (nx-1); ix++)
            imgs[ix][iy] = imgs[ix+1][iy];
// Переноси сохраненную картинку вправо
      imgs[nx-1][iy] = tempimg;
// Задаём графические координаты правой части
      imgs[nx-1][iy].style.left = imgs[nx-2][iy].offsetLeft+nWidth+"px";
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
          x1php = imgs[nx-2][iy].x1php+nWidthGis;
          y1php = imgs[nx-2][iy].y1php;
          imgs[nx-1][iy].x1php = x1php;
// и правого углов
          x2php = x1php+nWidthGis;
          y2php = y1php+nHeightGis;
// и графической шириной и высотой
          imgs[nx-1][iy].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
          }
        xOld = evt.clientX-imgs[0][0].offsetLeft;
    }
// Если верхний край второго слева и сверху фрагмента вышел за
// верхнюю графическую границу
      if (imgs[1][1].offsetTop < y0)
        {
// По всем столбцам
        for (ix = 0; ix < nx; ix++)
          {
// Сохраняем крайний верхний элемент
      tempimg = imgs[ix][0];
// Сдвигаем столбец вверх
      for (iy = 0; iy < (ny-1); iy++)
            imgs[ix][iy] = imgs[ix][iy+1];
// Переносим сохраненную картинку вниз
      imgs[ix][ny-1] = tempimg;
// Задаём графические координаты нижней части
      imgs[ix][ny-1].style.top = imgs[ix][ny-2].offsetTop+nHeight+"px";
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
          x1php = imgs[ix][ny-2].x1php;
          y1php = imgs[ix][ny-2].y1php+nHeightGis;
          imgs[ix][ny-1].y1php = y1php;
// и правого углов
          x2php = x1php+nWidthGis;
          y2php = y1php+nHeightGis;
// и графической шириной и высотой
          imgs[ix][ny-1].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
          }
        yOld = evt.clientY-imgs[0][0].offsetTop;
    }
// Если левая граница самого правого и нижнего фрагмента вышла
// за правую графическую границу
      if (imgs[nx-1][ny-1].offsetLeft > x0+nWidth*nx)
        {
// По всем строкам
        for (iy = 0; iy < ny; iy++)
          {
// Сохраняем крайний правый элемент
      tempimg = imgs[nx-1][iy];
// Сдвигаем строку вправо
      for (ix = (nx-1); ix > 0; ix--)
            imgs[ix][iy] = imgs[ix-1][iy];
// Переноси сохраненную картинку влево
      imgs[0][iy] = tempimg;
// Задаём графические координаты левой части
      imgs[0][iy].style.left = imgs[1][iy].offsetLeft-nWidth+"px";
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
          x1php = imgs[1][iy].x1php-nWidthGis;
          y1php = imgs[1][iy].y1php;
          imgs[0][iy].x1php = x1php;
// и правого углов
          x2php = x1php+nWidthGis;
          y2php = y1php+nHeightGis;
// и графической шириной и высотой
          imgs[0][iy].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
          }
        xOld = evt.clientX-imgs[0][0].offsetLeft;
    }
// Если верхний край самого правого и нижнего фрагмента вышел за
// нижнюю графическую границу
      if (imgs[nx-1][ny-1].offsetTop > y0+nHeight*ny)
        {
// По всем столбцам
        for (ix = 0; ix < nx; ix++)
          {
// Сохраняем крайний нижний элемент
      tempimg = imgs[ix][ny-1];
// Сдвигаем столбец вниз
      for (iy = (ny-1); iy > 0; iy--)
            imgs[ix][iy] = imgs[ix][iy-1];
// Переносим сохраненную картинку вверх
      imgs[ix][0] = tempimg;
// Задаём графические координаты верхней части
      imgs[ix][0].style.top = imgs[ix][1].offsetTop-nHeight+"px";
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
          x1php = imgs[ix][1].x1php;
          y1php = imgs[ix][1].y1php-nHeightGis;
          imgs[ix][0].y1php = y1php;
// и правого углов
          x2php = x1php+nWidthGis;
          y2php = y1php+nHeightGis;
// и графической шириной и высотой
          imgs[ix][0].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
          }
        yOld = evt.clientY-imgs[0][0].offsetTop;
    }
      }
// Снимаем прерывание    
    if (evt.preventDefault)
      { evt.stopPropagation(); evt.preventDefault(); }
    else
      { evt.cancelBubble = true; evt.returnValue = false; }
    return false;
    }







//-->
</script>


</head>
<body>

<div id="Layer1">

<script type="text/javascript">
<!--
// -----------------------------------------------------------
// Фрагмент инициализации внешнего div
// -----------------------------------------------------------
// Берём ссылку на div
  var Layer1 = document.getElementById("Layer1");
// Позицируем div
  Layer1.style.position = "absolute";
  Layer1.style.left = x0Vis+"px";
  Layer1.style.top = y0Vis+"px";
// Определяем ширину и высоту
  Layer1.style.width = VisWidth+"px";
  Layer1.style.height = VisHeight+"px";
// Ограничиваем область показа
  Layer1.style.overflow = "hidden";
// Зачерняем фон слоя
  Layer1.style.backgroundColor = "green";
// -----------------------------------------------------------
// Фрагмент инициализации картинок
// -----------------------------------------------------------
// Создаём в документе контейнеры для картинок
// и сразу же пихаем ссылки в массив
// По всем Y
  for (iy = 0; iy < ny; iy++)
// По всем X
    for (ix = 0; ix < nx; ix++)
      {
// Делаем строку с id картинки
      imgs_id = "imgs"+ix+"_"+iy;
// Пишем в документ контейнер
      document.write('<IMG id="'+imgs_id+'">');
// Создаём и инициализируем ссылку
      imgs[ix][iy] = document.getElementById(imgs_id);
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
      x1php = x0Gis+ix*nWidthGis;
      y1php = y0Gis+iy*nHeightGis;
// и правого углов
      x2php = x1php+nWidthGis;
      y2php = y1php+nHeightGis;
// и графической шириной и высотой
      imgs[ix][iy].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
// для простоты сохраняем геокоординаты фрагмента
      imgs[ix][iy].x1php = x1php;
      imgs[ix][iy].y1php = y1php;
// задаём начальное графическое положение фрагмента
      imgs[ix][iy].style.position = "absolute";
      imgs[ix][iy].style.left = x0+ix*nWidth+"px";
      imgs[ix][iy].style.top = y0+iy*nHeight+"px";
// задаём ширину и высоту фрагмента
      imgs[ix][iy].style.width = nWidth+"px";
      imgs[ix][iy].style.height = nHeight+"px";
      }

//-->
</script>

</div>


<script type="text/javascript">
<!--
// -----------------------------------------------------------
// Фрагмент инициализации обработчиков мыши
// -----------------------------------------------------------
  document.onmousemove = mmove;
  document.onmousedown = mdown;
  document.onmouseup = mup;
//-->
</script>

</body>
</html>


Если кто хочет посмотреть в действии, вот:
http://ksicom.homeunix.net:8009/ksicom/zzz14.html
Канал стрим и сервер P166 smile со всеми вытекающими smile
Тянуть медленно и ждать пока загрузится, т. к. одна проблема ещё не решена:

Как сделать так, чтобы после того, как переношу картинку с левого (правого, верхнего, нижнего) фланга на противоположный она сначала загружалась, а потом только выдавалась. А то получается "прокрутка" старой картинки.

И ещё просьба, покритикуйте пожалуйста, т. к. планируется использовать в реальном проекте smile
И если можно поподробней, т. к. это второй код, написанный мною на JS в жизни.
P.S. Тестировал на FF1.07 и IE5, IE6

Автор: ksicom 9.10.2005, 13:47
Это я был smile
Забыл войти

Автор: Aliance 9.10.2005, 14:14
Работает, но линии кривые, т.е. при движении искажаются.

Автор: ksicom 9.10.2005, 16:34
Они не кривые
Они просто подгружаются...
Т.е. на место старых картинок ставятся новые.
Проблема в этом и заключается, что я не знаю как бы так на время подгрузки заменить старую картинку на что-нибудь типа loading или просто пустую картинку
src="" и применение к картинке ожидания onload почему-то не помогают smile

Автор: ksicom 10.10.2005, 00:21
Вот теперь в самый раз smile
Всё что надо куда надо загружается и пишет Loading smile
Рабочая версия:
http://ksicom.homeunix.net:8009/ksicom/zzz16.html
И сам скрипт
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>


<script language="javascript">
<!--

// -----------------------------------------------------------
// Настройки
// -----------------------------------------------------------
// Количество фрагментов по горизонтали и вертикали
  var nx         = 6;
  var ny         = 6;
// Левый верхний географический угол
  var x0Gis      = 0;
  var y0Gis      = 0;
// Ширина и высота единичного фрагмента в геоединицах
  var nWidthGis  = 100;
  var nHeightGis = 100;
// Левый верхний графический угол (относительно x0Vis!!!)
//  var x0         = 100;
//  var y0         = 100;
  var x0         = -100;
  var y0         = -100;
// Ширина и высота единичного фрагмента в пикселях
  var nWidth     = 100;
  var nHeight    = 100;
// Левый верхний угол отображаемого окна (относительно окна браузера!!!)
  var x0Vis      = 30;
  var y0Vis      = 30;
// Ширина и высота отображаемого окна
//  var VisWidth   = 600;
//  var VisHeight  = 600;
  var VisWidth   = 400;
  var VisHeight  = 400;
// -----------------------------------------------------------
// Служебные глобальные переменные
// -----------------------------------------------------------
// Массив для информации по картинкам
  var imgs = new Array();
// Объект, в который заносится картинка с временным рисунком
  var Loading = new Image();
// Для сохранения координат на стадии Drag
  var xOld = 0;
  var yOld = 0;
// -----------------------------------------------------------
// Инициализация служебной информации
// -----------------------------------------------------------
// Генерим вложенные массивы
  for(ix=0; ix<nx; ix++)
    imgs[ix] = new Array();
// Загружаем картинку с надписью Loading...
  Loading.src = "img/loading.png";
// -----------------------------------------------------------
// Обработчик нажатия кнопки мыши
// -----------------------------------------------------------
  function mdown(e) 
    {
    var evt=window.event? window.event: e;
// Если в зоне окошка карты
      if ((evt.clientX >= x0Vis) &&
          (evt.clientX <= (x0Vis+VisWidth)) &&
      (evt.clientY >= y0Vis) &&
          (evt.clientY <= (y0Vis+VisHeight)))
        {
        document.getElementById("Layer1").dragging=true;
        xOld=evt.clientX-imgs[0][0].offsetLeft;
        yOld=evt.clientY-imgs[0][0].offsetTop;
        }
// Снимаем прерывание    
    if (evt.preventDefault)
      { evt.stopPropagation(); evt.preventDefault(); }
    else
      { evt.cancelBubble = true; evt.returnValue = false; }
    return false;
    }
// -----------------------------------------------------------
// Обработчик отпускания кнопки мыши
// -----------------------------------------------------------
  function mup(e)
    {
    var evt=window.event? window.event: e;
    document.getElementById("Layer1").dragging=false;
// Снимаем прерывание    
    if (evt.preventDefault)
      { evt.stopPropagation(); evt.preventDefault(); }
    else
      { evt.cancelBubble = true; evt.returnValue = false; }
    return false;
    }
// -----------------------------------------------------------
// Обработчик передвижения мыши
// -----------------------------------------------------------
  function mmove(e) 
    {
    var evt=window.event? window.event: e;
    var xNew=document.body.scrollLeft + evt.clientX-xOld;
    var yNew=document.body.scrollTop + evt.clientY-yOld;
    var tempimg;

    if(document.getElementById("Layer1").dragging) 
      {
      for (iy = 0; iy < ny; iy++)
        for (ix = 0; ix < nx; ix++)
          {
          imgs[ix][iy].style.left = (xNew+nWidth*ix)+"px";
          imgs[ix][iy].style.top = (yNew+nHeight*iy)+"px";
          }
// Если левый край второго слева и сверху фрагмента вышел за левую
// графическую границу
      if (imgs[1][1].offsetLeft < x0)
        {
// По всем строкам
        for (iy = 0; iy < ny; iy++)
          {
// Сохраняем крайний левый элемент
      tempimg = imgs[0][iy];
// Сдвигаем строку влево
      for (ix = 0; ix < (nx-1); ix++)
            imgs[ix][iy] = imgs[ix+1][iy];
// Переноси сохраненную картинку вправо
      imgs[nx-1][iy] = tempimg;
          document.getElementById(imgs[nx-1][iy].id).src = Loading.src;
// Задаём графические координаты правой части
      imgs[nx-1][iy].style.left = imgs[nx-2][iy].offsetLeft+nWidth+"px";
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
          x1php = imgs[nx-2][iy].x1php+nWidthGis;
          y1php = imgs[nx-2][iy].y1php;
          imgs[nx-1][iy].x1php = x1php;
// и правого углов
          x2php = x1php+nWidthGis;
          y2php = y1php+nHeightGis;
// и графической шириной и высотой
          imgs[nx-1][iy].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
          }
        xOld = evt.clientX-imgs[0][0].offsetLeft;
    }
// Если верхний край второго слева и сверху фрагмента вышел за
// верхнюю графическую границу
      if (imgs[1][1].offsetTop < y0)
        {
// По всем столбцам
        for (ix = 0; ix < nx; ix++)
          {
// Сохраняем крайний верхний элемент
      tempimg = imgs[ix][0];
// Сдвигаем столбец вверх
      for (iy = 0; iy < (ny-1); iy++)
            imgs[ix][iy] = imgs[ix][iy+1];
// Переносим сохраненную картинку вниз
      imgs[ix][ny-1] = tempimg;
          document.getElementById(imgs[ix][ny-1].id).src = Loading.src;
// Задаём графические координаты нижней части
      imgs[ix][ny-1].style.top = imgs[ix][ny-2].offsetTop+nHeight+"px";
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
          x1php = imgs[ix][ny-2].x1php;
          y1php = imgs[ix][ny-2].y1php+nHeightGis;
          imgs[ix][ny-1].y1php = y1php;
// и правого углов
          x2php = x1php+nWidthGis;
          y2php = y1php+nHeightGis;
// и графической шириной и высотой
          imgs[ix][ny-1].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
          }
        yOld = evt.clientY-imgs[0][0].offsetTop;
    }
// Если левая граница самого правого и нижнего фрагмента вышла
// за правую графическую границу
      if (imgs[nx-1][ny-1].offsetLeft > x0+nWidth*nx)
        {
// По всем строкам
        for (iy = 0; iy < ny; iy++)
          {
// Сохраняем крайний правый элемент
      tempimg = imgs[nx-1][iy];
// Сдвигаем строку вправо
      for (ix = (nx-1); ix > 0; ix--)
            imgs[ix][iy] = imgs[ix-1][iy];
// Переноси сохраненную картинку влево
      imgs[0][iy] = tempimg;
          document.getElementById(imgs[0][iy].id).src = Loading.src;
// Задаём графические координаты левой части
      imgs[0][iy].style.left = imgs[1][iy].offsetLeft-nWidth+"px";
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
          x1php = imgs[1][iy].x1php-nWidthGis;
          y1php = imgs[1][iy].y1php;
          imgs[0][iy].x1php = x1php;
// и правого углов
          x2php = x1php+nWidthGis;
          y2php = y1php+nHeightGis;
// и графической шириной и высотой
          imgs[0][iy].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
          }
        xOld = evt.clientX-imgs[0][0].offsetLeft;
    }
// Если верхний край самого правого и нижнего фрагмента вышел за
// нижнюю графическую границу
      if (imgs[nx-1][ny-1].offsetTop > y0+nHeight*ny)
        {
// По всем столбцам
        for (ix = 0; ix < nx; ix++)
          {
// Сохраняем крайний нижний элемент
      tempimg = imgs[ix][ny-1];
// Сдвигаем столбец вниз
      for (iy = (ny-1); iy > 0; iy--)
            imgs[ix][iy] = imgs[ix][iy-1];
// Переносим сохраненную картинку вверх
      imgs[ix][0] = tempimg;
          document.getElementById(imgs[ix][0].id).src = Loading.src;
// Задаём графические координаты верхней части
      imgs[ix][0].style.top = imgs[ix][1].offsetTop-nHeight+"px";
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
          x1php = imgs[ix][1].x1php;
          y1php = imgs[ix][1].y1php-nHeightGis;
          imgs[ix][0].y1php = y1php;
// и правого углов
          x2php = x1php+nWidthGis;
          y2php = y1php+nHeightGis;
// и графической шириной и высотой
          imgs[ix][0].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
          }
        yOld = evt.clientY-imgs[0][0].offsetTop;
    }
      }
// Снимаем прерывание    
    if (evt.preventDefault)
      { evt.stopPropagation(); evt.preventDefault(); }
    else
      { evt.cancelBubble = true; evt.returnValue = false; }
    return false;
    }

//-->
</script>


</head>
<body>

<div id="Layer1">

<script type="text/javascript">
<!--
// -----------------------------------------------------------
// Фрагмент инициализации внешнего div
// -----------------------------------------------------------
// Берём ссылку на div
  var Layer1 = document.getElementById("Layer1");
// Позицируем div
  Layer1.style.position = "absolute";
  Layer1.style.left = x0Vis+"px";
  Layer1.style.top = y0Vis+"px";
// Определяем ширину и высоту
  Layer1.style.width = VisWidth+"px";
  Layer1.style.height = VisHeight+"px";
// Ограничиваем область показа
  Layer1.style.overflow = "hidden";
// Зачерняем фон слоя
  Layer1.style.backgroundColor = "green";
// -----------------------------------------------------------
// Фрагмент инициализации картинок
// -----------------------------------------------------------
// Создаём в документе контейнеры для картинок
// и сразу же пихаем ссылки в массив
// По всем Y
  for (iy = 0; iy < ny; iy++)
// По всем X
    for (ix = 0; ix < nx; ix++)
      {
// Делаем строку с id картинки
      imgs_id = "imgs"+ix+"_"+iy;
// Пишем в документ контейнер
      document.write('<IMG id="'+imgs_id+'">');
// Создаём и инициализируем ссылку
      imgs[ix][iy] = document.getElementById(imgs_id);
// Берём из БД нужный географический фрагмент карты
// С геокоординатами левого
      x1php = x0Gis+ix*nWidthGis;
      y1php = y0Gis+iy*nHeightGis;
// и правого углов
      x2php = x1php+nWidthGis;
      y2php = y1php+nHeightGis;
// и графической шириной и высотой
      imgs[ix][iy].src = "create_image.php?X1="+x1php+"&Y1="+y1php+"&X2="+x2php+"&Y2="+y2php+"&WIDTH="+nWidth+"&HEIGHT="+nHeight;
// для простоты сохраняем геокоординаты фрагмента
      imgs[ix][iy].x1php = x1php;
      imgs[ix][iy].y1php = y1php;
// задаём начальное графическое положение фрагмента
      imgs[ix][iy].style.position = "absolute";
      imgs[ix][iy].style.left = x0+ix*nWidth+"px";
      imgs[ix][iy].style.top = y0+iy*nHeight+"px";
// задаём ширину и высоту фрагмента
      imgs[ix][iy].style.width = nWidth+"px";
      imgs[ix][iy].style.height = nHeight+"px";
      }

//-->
</script>

</div>


<script type="text/javascript">
<!--
// -----------------------------------------------------------
// Фрагмент инициализации обработчиков мыши
// -----------------------------------------------------------
  document.onmousemove = mmove;
  document.onmousedown = mdown;
  document.onmouseup = mup;
//-->
</script>

</body>
</html>




Ну и самый последний вопрос в рамках этого скрипта:
в maps.google этого нету, а я бы хотел smile
Есть ли какая-нибудь возможность снизить приоритет загрузки данного объекта?
Т. е. если пользователь резко рванул налево, чтобы все квадратики, которые он быстро прокручивает не грузились, а грузились сразу квадратики на которых он остановился.?
Или можно как-нибудь отменить загрузку картинки?

Единственное, что мне в голову приходит, грузить картинки (img.src="new src...") не сразу, а после какой-то паузы. Но если так делать, не знаю как отловить из текущего обработчика приход следующего события (т. е. как отловить, что во время паузы юзер всё же сдвинул мышь) smile

Автор: Sardar 10.10.2005, 17:05
Цитата(ksicom @ 9.10.2005, 23:21)
Всё что надо куда надо загружается и пишет Loading

Работает красиво, респект smile
Цитата(ksicom @ 9.10.2005, 23:21)
Есть ли какая-нибудь возможность снизить приоритет загрузки данного объекта?

К сожалению нет. Браузер может вообще ничего не грузить, пока картинка реально не покажеться пользователю, но из под скриптов этого нет.
Цитата(ksicom @ 9.10.2005, 23:21)
Или можно как-нибудь отменить загрузку картинки?

Только src="", но некоторые браузеры, например Мозилла будут всё равно грузить картинку, тем самым забивая левый траф)
Цитата(ksicom @ 9.10.2005, 23:21)
Единственное, что мне в голову приходит, грузить картинки (img.src="new src...") не сразу, а после какой-то паузы.

очень не хорошее свойство, пользователь будет думать что всё тормозит по чёрному smile
Цитата(ksicom @ 9.10.2005, 23:21)
Но если так делать, не знаю как отловить из текущего обработчика приход следующего события (т. е. как отловить, что во время паузы юзер всё же сдвинул мышь)

Onload на картинке уведомляет о загрузке, ну а события мыши не прерываються никогда, твой обработчик будет работать. В чём конкретно проблема?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)