DropDown menu в части изображения
 

Здравствуйте! Подскажите как реализовать DropDown menu в разных определенных областях изображения (я изпользую usemap). Допустим есть большое изображение, и в 5 его разных областям появляется разное меню. Есть вот такой скрипт

<script type="text/javascript" src="lib/mm.js">
</script>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="index.shtml" rel="dropmenu1"><img src="img/m_menu_1.gif" alt="О нас" border="0"></a></li>
<li><a href="abi_spec.shtml" rel="dropmenu2"><img src="img/m_menu_2.gif" alt="Абитуриенту" border="0"></a></li>
<li><a href="stud_mar.shtml" rel="dropmenu3"><img src="img/m_menu_3.gif" alt="Студенту" border="0"></a></li>
<li><a href="rod_otd.shtml" rel="dropmenu4"><img src="img/m_menu_4.gif" alt="Родителям" border="0"></a></li>	
<li><a href="edu_spec.shtml" rel="dropmenu5"><img src="img/m_menu_5.gif" alt="Образование" border="0"></a></li>
<li><a href="usl_kurs.shtml" rel="dropmenu6"><img src="img/m_menu_6.gif" alt="Услуги" border="0"></a></li>
</ul>
</div>

<!--1st drop down menu -->                                                  
<div id="dropmenu1" class="dropmenudiv" style="width: 180px;">
<a href="news.shtml">Новости</a>
<a href="history.shtml">КИПТы, история</a>
<a href="admin.shtml">Администрация</a>
<a href="today.shtml">Колледж сегодня</a>
<a href="col_in_face.shtml">Колледж в лицах</a>
<a href="dost.shtml">Достижения нашего колледжа</a>
<a href="contacts.shtml">Координаты</a>
<a href="foto_abi.shtml">Фотогалерея</a>
<a href="nsot.shtml">Структура колледжа</a>
<a href="vak.shtml">Вакансии</a>
<a href="veteran.shtml">Наши ветераны</a>
<a href="http://sgppk.ru/forum">Форум</a>
</div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="abi_spec.shtml">Обзор специальностей</a>
<a href="abi_ob.shtml">Формы обучения</a>
<a href="abi_treb.shtml">Приемная комиссия</a>
<a href="abi_next.shtml">Продолжение образования</a>
<a href="abi_dop.shtml">Открытый факультет</a>
<a href="abi_faq.shtml">Часто задаваемые вопросы</a>
<a href="abi_dod.shtml">Дни открытых дверей</a>
<a href="abi_college_vuz.shtml"><b>Колледж или ВУЗ?</b></a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 180px;">
<a href="raspisanie/rasp.htm">Расписание</a>
<a href="sl_trud.shtml">Трудоустройство</a>
<a href="stud_mar.shtml">Образовательный маршрут</a>
<a href="abi_dop.shtml">Второй диплом</a>
<a href="stud_if_prob.shtml">Страничка психолога</a>
<a href="stud_soc.shtml">Социальная деятельность</a>
<a href="stud_bank.shtml">Оплата за обучение, общежитие</a>
<a href="stud_stipend.shtml">Стипендия для студентов</a>
<a href="stud_go.shtml">Безопасность</a>
<a href="stud_sk.shtml">"Самарский колледж"</a>
<a href="abi_next.shtml">Продолжение образования</a>
</div>

<!--4rd drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv" style="width: 180px;">
<a href="rod_otd.shtml">Отделения</a>
<a href="admin.shtml">Список телефонов</a>
<a href="stud_go.shtml">Безопасность</a>
<a href="rod_bank.shtml">Оплата за обучение, общежитие</a>
<a href="stud_sk.shtml">"Самарский колледж"</a></div>

<!--5rd drop down menu -->                                                   
<div id="dropmenu5" class="dropmenudiv" style="width: 180px;">
<a href="edu_spec.shtml">Специальности</a>
<a href="spis_pzmk.shtml">Предметно-цикловые комиссии</a>
<a href="pvr.shtml">Воспитательная работа</a>
<a href="seminar_col_new.shtml">Семинары</a>
<a href="dop_obr.shtml">Дополнительное образование</a>
<a href="open_lessons.shtml">Открытые уроки</a>
<a href="obr_ege.shtml">ЕГЭ</a>
<a href="soc_part.shtml">Социальные партнеры</a>
<a href="abi_dop.shtml">Открытый факультет</a>
<a href="kat_kmo.shtml">Каталог КМО</a>
</div>

<!--6rd drop down menu -->                                                   
<div id="dropmenu6" class="dropmenudiv" style="width: 185px;">
<a href="usl_kurs.shtml">Курсы</a>
<a href="usl_avto.shtml">Автошкола</a>
<a href="usl_lib.shtml">Библиотека</a>
<a href="usl_proizv.shtml">Производство</a>
<a href="edu_HAAS.shtml">Центр технического обучения</a>
<a href="usl_tv.shtml">Телестудия</a>
<a href="usl_kmb.shtml">Копировально-множительное бюро</a>
<a href="usl_mu.shtml">Музей</a>
<a href="usl_zd.shtml">Здравпункт</a>
<a href="usl_pi.shtml">Столовая</a>
<a href="obsh.shtml">Общежитие</a>
<a href="sport_kompl.shtml">Спорткомплекс</a>
<a href="http://if.sgppk.ru">Статистика интернет</a>
<a href="dost_int.shtml">Доступ в интернет</a>
<a href="http://192.168.100.169:8080/index.jsp">Электронный каталог</a>
<a href="http://192.168.100.179">Каталог ГОСТов</a>
<a href="http://moodle.sgppk.ru">Электронные учебные курсы</a>
<a href="http://e5.onthehub.com/WebStore/ProductsByMajorVersionList.aspx?ws=33730d76-c58b-e011-969d-0030487d8897&vsro=8">Программное обеспечение MSDN AA</a>
<a href="obiavlenie.shtml">Объявления</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

Он для только для отдельных изображений.
А вот как делать для всего изображения? Допустим у меня есть изображение с прикрученным map

<img src="/img/sgppk22.jpg" alt="Поволжский государственный колледж" usemap="#ImageMap1">

и сам код map

<map name="ImageMap1">
<area shape="rect" coords="27, 5, 231, 25" href="ya.ru">
</map>

Как добавить скрипт выпадания меню для определенной области изображения?

Наверное проще свою реализацию написать. Плагин похоже привязывается именно к изображениям. А своя реализация может быть примерно такой:

$("area").hover(function(e) {
    $("dropmenu1").css('left', e.pageX + 'px');
    $("dropmenu1").css('top', e.pageY + 'px');

    $("dropmenu1").show();
}, function() {
    $("dropmenu1").hide();
})

вместо e.pageX и e.pageY может быть придется использовать другие свойства (offsetX, screenX ...). Вобщем firebug и эксперименты вам в помощь