Двигающееся и масштабируемое изображение на сайте
 

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

Проблема возникает, во-первых, при масштабировании (приближении и отдалении карты), как его сделать? Всегда отображать одно и то же изображение при увеличении и уменьшении или отображать разные изображения (каждое для определенного масштаба)?

Во-вторых, так как мне нужно отмечать населенные пункты, на которых была нажата мышка, требуется получать координаты мыши относительно левого верхнего края изображения. Как это делать, если помещать изображение в hmtl-код через тег <img>?

Для случая, когда IMG вставлен прямо в BODY надо смотреть .offsetLeft и .offsetTop картинки и использовать для корректировки координат мыши.
Но есть ощущение, что Вы не с того начали. В целом описанная задача тянет на несколько листов описания технологии картографии. И масштабирование/перемещение картинки - это не самая большая проблема, с чем придется ещё столкнуться. Лучше использовать готовое. Тем более, что есть API.
http://map.google.com

В современном вэбе готовых решений вагон и маленькая тележка поэтому в первую очередь стоит смотреть в сторону готовый решений и копипастить лучшее добавляя нужный тебе функционал (костыли).

Если хочешь сделать сам но при этом попроще и на готовых решениях смотри в сторону библиотеки http://leafletjs.com/index.html

Если хочешь как можно проще то смотри в сторону OSM гугла ну или на крайний случай яндекса.