Карта изображений

[archi_bald]

Доброго времяни суток!!! Помогите решить поставленую самим собой задачу. Есть карта изображений, тоесть огромное изображение с ссылками по координатам. Хочу прикрутить кномки для быстрого перехода к тем или иным координатам на изображении. Большое спасибо за помощь.

[Veseloff]

Используйте javascript.

[rus]

типа того: http://nibe-rus.ru/nibe-v-mire ? разбирайте код, смотрите что за что отвечает.

[archi_bald]

Используйте javascript.

Я понимаю что нужно использовать javascript .

[Veseloff]

А в чём тогда проблема? Хотите, чтобы за вас всё сделали?

[archi_bald]

А в чём тогда проблема? Хотите, чтобы за вас всё сделали?

Нет не вкоем случаи, я новичок и мне самому хочется разобраться. Нехватает подсказки с чего начать. Или как найти с чего начать. Что прописать в поисковике!?

типа того: http://nibe-rus.ru/nibe-v-mire ? разбирайте код, смотрите что за что отвечает.

Спасибо, но не то что нужно мне. У меня карта города, на карте обьекты, хочу кликнуть на ссылку в сайтбаре и браузер с позиционировал мне карту что б по центру был тот самый обьект. Как то так

[Veseloff]

Окей. Я бы сделал так: спозиционировал абсолютно большую картинку, сделал бы список ссылок, для каждой бы ссылки сделал бы атрибуты data-x и data-y с координатами точки на картинке. По нажатию на ссылку менял бы top и left у картинки. Гуглите: javascript onclick, javascript event listener, getElementById, изменение стилей javascript. Что непонятно — спрашивайте.

[archi_bald]

Окей. Я бы сделал так: спозиционировал абсолютно большую картинку, сделал бы список ссылок, для каждой бы ссылки сделал бы атрибуты data-x и data-y с координатами точки на картинке. По нажатию на ссылку менял бы top и left у картинки. Гуглите: javascript onclick, javascript event listener, getElementById, изменение стилей javascript. Что непонятно — спрашивайте.

Большое спасибо. Буду пробывать. О результате сообщу!!!

[archi_bald]

Получилось, большое спасибо за помощь.
 

 

function goto(_x, _y) {
    var x = _x - (window.screen.width/2);
    var y = _y - (window.screen.height/2);
    window.scrollTo( x, y );
}

 

<a href="javascript:goto(2199, 5518)">#</a>
<a href="javascript:goto(3357, 3123)">#</a>

[SelenIT]

Только лучше брать не screen.width/height, а document.documentElement.clientWidth/clientHeight, потому что 1) окно браузера не обязательно раскрыто на весь экран, особенно когда он большой, и 2) на retina- и им подобных экранах с высокой плотностью пикселей screen.width/height меряется в аппаратных пикселях, а нам нужны CSS-пиксели (подробнее - http://www.quirksmode.org/mobile/viewports.html, есть перевод).

[archi_bald]

Только лучше брать не screen.width/height, а document.documentElement.clientWidth/clientHeight, потому что 1) окно браузера не обязательно раскрыто на весь экран, особенно когда он большой, и 2) на retina- и им подобных экранах с высокой плотностью пикселей screen.width/height меряется в аппаратных пикселях, а нам нужны CSS-пиксели (подробнее - http://www.quirksmode.org/mobile/viewports.html, есть перевод).

Спасибо большое, только проверил, действительно работает не идеально. Попробую document.documentElement.clientWidth/clientHeight. Статья отличная.