Януш написал(а):

Как сделать всплывающее меню, управляемое по клику на область МАП-карты ?

Януш, - Берём что- нибудь из доступного alt - например - и прописываем туда id открывающихся по клику блоков (href из area  - убираем - дабы не кликалось)

<map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0"  alt="#Yanush1">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" alt="#Yanush2">
  <area shape="poly" coords="304,24,385,24,407,0,329,0"  alt="#Yanush3">
  <area shape="poly" coords="384,24,449,24,473,0,406,0"  alt="#Yanush4">
  </map>

Далее наши div контейнеры

<div id="Yanush1" class="Yanush"> Тут контент для первой области </div>
<div id="Yanush2" class="Yanush"> Тут контент для Второй области </div>
<div id="Yanush3" class="Yanush"> Тут контент для третьей области </div>
<div id="Yanush4" class="Yanush"> Тут контент для Четвертой области </div>

Скрываем их всех css в HTML верх (И открываем Первый блок  -(*или не открываем - эт по желанию - тогда синее удаляем

<style>
.Yanush {display:none}
#Yanush1 {display:block}
</style>

Далее Сlick-cкрипт ...

селектор для area > ("map[name='Navigation'] area")
Итого в HTML низ ( хотя удобнее скрипт ставить ниже последнего контейнера - дабы не искать при смене таблицы с мап картой

Код:

<script>
$(document).ready(function() {
$("map[name='Navigation'] area").click(function() {
    var activeDiv = $(this).attr("alt");
    $(".Yanush").hide()  //Скрываем все
    $(activeDiv).fadeIn(2200);  //Разворачиваем нужный /2200 -Время -разворота регулируем
    return false; });
});
</script>

(*Тестовый рабочий пример

Код:

<style>
.Yanush {display:none;}
#Yanush1 {display:block;}
</style>
<img src="http://s002.radikal.ru/i197/1002/14/2804fa17b4d7.png" border="0" usemap="#Navigation" >
<map name="Navigation"><area shape="rect" coords="12,194,164,228" alt="#Yanush1">
<area shape="rect" coords="81,245,166,280" alt="#Yanush2">
<area shape="rect" coords="64,303,217,337" alt="#Yanush3">
<area shape="rect" coords="151,353,302,391" alt="#Yanush4">
</map>
<div id="Yanush1" class="Yanush"> Тут контент для первой области </div>
<div id="Yanush2" class="Yanush"> Тут контент для Второй области </div>
<div id="Yanush3" class="Yanush"> Тут контент для третьей области </div>
<div id="Yanush4" class="Yanush"> Тут контент для Четвертой области </div>
<script>
$(document).ready(function() {
$("map[name='Navigation'] area").click(function() {
    var activeDiv = $(this).attr("alt");
    $(".Yanush").hide()  //Скрываем все
    $(activeDiv).fadeIn(2200);  //Разворачиваем нужный /2200 -Время -разворота регулируем
    return false; });
});
</script>

(код пихаем в Объяву и кликаем

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

Основное неудобство при работе с Мап картой - что тыкаемую область картинки - трудно выделить при кликнутом-не кликнутом состоянии ( поскольку ни цвет не бордюр для area не работают(хотя есть идеи