С помощью какой технологии реализовать изображение карту
 

Имеем (например jpg) картинку с картой, например карта области
Добавить на карту другие картинки с прозрачным фоном обозначающие точки на карте (например gif что бы они мерцали при наведении)
При клике на точке карты (рядом с точкой на той же карте) вываливается столбец (список пунктов 1. ..... 2.....3.... и тд).

Скажите что лучше использовать для реализации? или Дайте ссылку на похожий пример или скажите как лучше

Если делать так как написали - тогда можно просто с помощью CSS!
1) Ставим Дивку в размер карты и Карту кладем ему фоном. background:url(путь к файлу Карты) repeat-x;

2) Точки - тоже делаем дивами и расставляем их с помощью position:absolute; и отступов от краев top:, left:, right:, bottom:.
И к стати их можно сделать и не Гифками, а так же поместить фоном и заменять картинку при неведении :hover

3)Список пунктов делаем как Выпадающее Меню.
Вначале position:absolute; left:-9999px; (прячем за экран)
А при наведении на Точку left:0; (возвращаем на экран).

Вот и все - Тогда даже по точкам кликать не надо будет!

0-SergeySS >Вот как просто можно решить вашу задачу!

<style>
.box_map {width:25px; height:25px; border-radius:25px; border:solid 5px #f00; text-align:center; line-height:25px; background:#fff; cursor:pointer;**
.box_map div {position:absolute; left:-9999px; top:20px; width:120px; border:solid 1px #000; border-radius:8px; background:#fff; padding:10px;**
.box_map:hover {border-color:#0f0;**
.box_map:hover div{left:25px;**
</style>
<div style="width:700px; height:600px; background:url([url]http://comp23.ru/images/new_year/ded-top.png[/url]) no-repeat 50% 50%; padding:0; position:relative; display:block;">
<div class="box_map" style="position:absolute; top:100px; left:430px;">1
<div>Вот смотри внучек!<br />Эти Дядьки, с МКС<br />У нас оленей увели!</div>
</div>
<div class="box_map" style="position:absolute; bottom:300px; left:350px;">2
<div>Деда они у нас<br />их на прокат взяли<br />Пока к ним ПРОГРЕСС с горючкой не прилетит!</div>
</div>
<div class="box_map" style="position:absolute; top:190px; right:240px;">3
<div>А тогда Мешок мой с подарками<br />Где ?</div>
</div>
</div>

Думаю Картинки сами подложите!

Скорее, имелось ввиду интерактивная карта, тогда либо api яндекс карт, или api google maps...

[url]http://webmap-blog.ru/yandex-maps/sozdanie-sobstvennoj-karty-s-ispolzovaniem-api-yandeks-kart-2-x[/url]

1 и 2 это как раз то что нужно, даже больше
3 и 4 это не то, больше интересует как карту из гугла в картинку извлечь, чем вставить туда свою.

Карту Гугла в картинку обычный PrintScrin извлекает :)

А все остальное - обычная Верстка!
Кстати списки можно выводить с разных сторон [url]http://www.comp23.ru/demo/progress.html[/url]
Там текст № 3 отображается слева, а в код добавляется всего одна строчка - .box_map_left:hover div{left:-143px;**
И в Диве ставим - class="box_map box_map_left"

Вот и все - Удачи в реализации проекта!

5-SergeySS >sas.planet