Объекты на карте
 

Привет!

Я начинающий в веб-программировании, пытаюсь реализовать задачу, когда на карте есть несколько точек, при наведении курсора мыши на эти "точки", всплывает окошко с изображением и подписью. И всё это ещё надо вставить в качестве модуля для joomla. Но всё по порядку. Я опишу как я собираюсь её решить, и большая просьба - сказать, верно ли я всё понял и делаю?


Для начала я собираюсь расставить объекты (точки) на карте.

Для этого есть пустой контейнер div, у которого в качестве фонового изображения выступает карта.
В его стиле я задал ему размер, равный размеру изображения карты, и указал в качестве background саму карту.

Далее я планирую с помощью JavaScript создать требуемое число div, которые будут "точками" на карте и расставить их. Они будут дочерними для "карты". Чтобы можно было расставлять их в системе координат родителя, я задал им свойства position: absolute, в то время как у карты-родителя свойство position: relative;

пока создаю одну "точку":

window.onload = function()
{
	var map = document.getElementById("map");
	for(var i = 0; i < 1; ++i) //18
	{
		var img = document.createElement("div");		
		img.id = "building";		
		img.style.left = "100px";
		img.style.top = "200px";
		map.appendChild(img);		
	}
}

пока одну, потому что ещё не придумал, где и как буду хранить/загружать координаты. Возможно прямо в скрипте опишу. Но смысл в том, что создаются div'ы, у которых в стиле css #building указан background и размер. И присваивая нужные значения в img.style.left и img.style.top я расставлю их в нужные позиции на карте.

Затем я напишу ф-ию, которая будет вызываться, когда на точку-div наводится курсор мыши. И буду "всплывать" окно. До окна пока не добрался.

Скажите, пожалуйста, верно ли так делать? Или я уже не по верному пути пошёл?

Нужно будет потом встроить это в качестве модуля джумлы. Как писать каркас модуля на php для джумлы и вставлять модуль на сайт - разобрался.

- в цикле нет необходимости писать ++i, достаточно будет i++
- если планируется набор контейнеров, для последующей обработки, то у каждого из них должен быть уникальный идентификатор, поэтому рекомендую так:

img.id = "building"+i;

Значит принципы я понял верно)

Большое спасибо!