Так. Описываю, как это сделал я.
Есть БОЛЬШОЕ изображение. В моем случае это примерно 2000*2000. Еще есть маленький вариант, который показывается пользователю при открытии страницы. Сссылка на изображение по умолчанию выглядит как map.php. Если map.php не получает параметров, то перенаправляет на маленькую карту.
При клике на меленькую карту ссылка на изображение меняется на map.php?x=234&y=234, где числа это координаты клика. map.php обрабатывает их и отсылает пользователю соответствующую часть изображения (реализованно на gd).
Самая большая проблема это обьекты. При загрузки страницы загружается массив обьектов| Код |
<div id='1250' style='z-index:50;left:374.79388917659;top:280.94202898551;container:positioned; position:absolute;cursor: url(images/zoom.cur);display:none' onMouseOver='show(this);' onMouseOut='hide(this);' onclick='NewMap(374.79388917659, 280.94202898551);'>
<img id="1250_img" src="/dm_pics/43957b6ee58d8.gif" border=0>
</div>
|
При клике на маленбкое изображение JS пересчитывает координаты этих обьектов и если они не находятся на карте делает их невидимыми. Соответственно при повторном клике (возврате на полную карту) производится обратный персчет (точнее восстанавливались сохранненные данные).
В базе хранятся только координаты обьектов.
Вот такой вот яваскрипт там | Код |
var divs = document.getElementsByTagName('div');
var data = new Array(divs.length);
var data1 = new Array(divs.length);
var sX, sY;
function NewMap(x, y, isBigMap) {
if(x==0){x = event.x;}
if(y==0){y = event.y;}
document.getElementById('loading').style.display = "block";
var map = document.getElementById('map');
if(map.src != "http://.../minmap.gif" && map.src != "http://.../minmap.gif" && isBigMap)
{
map.style.cursor='images/zoom.cur';
for (i = 0; i < divs.length; i++) {
if(document.getElementById(divs[i].id+'_desc') != null)
{
divs[i].style.pixelLeft = data[i][0];
divs[i].style.pixelTop = data[i][1];
document.getElementById(divs[i].id+'_desc').style.pixelLeft = data[i][2];
document.getElementById(divs[i].id+'_desc').style.pixelTop = data[i][3];
divs[i].style.display = data[i][5];
data1[i] = divs[i].style.display;
divs[i].style.display = "none";
divs[i].style.cursor='url(images/zoom.cur)';
}
else
{
if(divs[i].id.substr(0,10)=="map_kompas")
{
divs[i].style.display = "none";
}
}
}
map.src="/map/minmap.gif";
}
else {
map.style.cursor='images/back.cur';
//document.getElementById('info').innerHTML = '<img src="map/back.gif">';
if(x<350/1931*700){x=350/1931*700;}
if(y<350/1931*700){y=350/1931*700;}
if(x>700-350/1931*700){x=700-350/1931*700;}
if(y>900-350/1931*700){y=900-350/1931*700;}
sX = x;
sY = y;
if(!isBigMap)
{
for (i = 0; i < divs.length; i++) {
if(document.getElementById(divs[i].id+'_desc') != null)
{
divs[i].style.pixelLeft = data[i][0];
divs[i].style.pixelTop = data[i][1];
document.getElementById(divs[i].id+'_desc').style.pixelLeft = data[i][2];
document.getElementById(divs[i].id+'_desc').style.pixelTop = data[i][3];
divs[i].style.display = data[i][5];
data1[i] = divs[i].style.display;
//divs[i].style.display = "none";
//divs[i].style.cursor='url(images/zoom.cur)';
}
}
}
for (i = 0; i < divs.length; i++) {
if(document.getElementById(divs[i].id+'_desc') != null)
{
data[i] = new Array(5);
data[i][0] = divs[i].style.pixelLeft;
data[i][1] = divs[i].style.pixelTop;
data[i][2] = document.getElementById(divs[i].id+'_desc').style.pixelLeft;
data[i][3] = document.getElementById(divs[i].id+'_desc').style.pixelTop;
data[i][5] = divs[i].style.display;
divs[i].style.pixelLeft = 700/2 - (x - divs[i].style.pixelLeft - 10)/700*1931 - 10;
divs[i].style.pixelTop = 700/2 - (y - divs[i].style.pixelTop - 15)/700*1931 - 15;
document.getElementById(divs[i].id+'_desc').style.pixelLeft = divs[i].style.pixelLeft + 25;
document.getElementById(divs[i].id+'_desc').style.pixelTop = divs[i].style.pixelTop - 35;
divs[i].style.display = "block";
if(divs[i].style.pixelLeft < 0 || divs[i].style.pixelLeft > 700 || divs[i].style.pixelTop < 0 || divs[i].style.pixelTop > 700)
{
divs[i].style.display = "none";
}
data1[i] = divs[i].style.display;
divs[i].style.display = "none";
divs[i].style.cursor='url(images/back.cur)';
}
else
{
if(divs[i].id.substr(0,10)=="map_kompas")
{
divs[i].style.display = "block";
}
}
}
map.src="/map/map.php?x="+x+"&y="+y;
}
}
function ShowObjects()
{
for (i = 0; i < divs.length; i++) {
if(document.getElementById(divs[i].id+'_desc') != null)
{
if(divs[i].style.display != null && data1[i] != null){divs[i].style.display = data1[i];}
}
}
}
|
|
