Часть 1. Оформление кода меп-карты
Как создать код меп-карты написано здесь: Создаём меп-карту
Необходимо добавить в код мепки следующее:
<p style="text-align: center;"><img style="vertical-align: middle;" usemap="#MAP" src="картинка меп-карты" alt="" /></p>
<p>
<map name="MAP">
<area onclick="document.getElementById('akad').style.display='block'; return false;" shape="rect" coords="201,54,323,100" href="#" alt="Академия" />
<area onclick="document.getElementById('hladmore').style.display='block'; return false;" shape="rect" coords="369,81,491,114" href="#" alt="Хладное Море" />
<area onclick="document.getElementById('ovamertv').style.display='block'; return false;" shape="rect" coords="543,34,653,95" href="#" alt="Острова мертвых душ" />
<area onclick="document.getElementById('ovderev').style.display='block'; return false;" shape="rect" coords="242,195,318,286" href="#" alt="Остров Дерева" />
.......
</map>
</p>
Выделенное жирным - это уникальное ID для области (любой набор латинских символов)
Часть 2. Добавление контейнеров (всплывающих окошек) и заполнение оных
<div id="akad" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('akad').style.display='none'; return false;"> Закрыть</button></div> <div id="hladmore" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('hladmore').style.display='none'; return false;"> Закрыть</button></div> <div id="ovamertv" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('ovamertv').style.display='none'; return false;"> Закрыть</button></div> <div id="ovderev" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('ovderev').style.display='none'; return false;"> Закрыть</button></div> ......
разберем подробнее, что же это за страшная вещь такая.
<div id="akad" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('akad').style.display='none'; return false;"> Закрыть</button></div>
<div></div> - добавляем контейнер
<div style="display: none;"></div> - скрываем его (чтоб на странице не висел под меп-картой)
<div id="akad" style="display: none;"></div> - добавляем id области. (чтобы код "понимал", какой контейнер при каком клике высвечивать)
<div id="akad" style="display: none;">Здесь может находиться любой текст в формате html<br /> </div> - добавляем html-текст в окошко
<div id="akad" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('akad').style.display='none'; return false;"> Закрыть</button></div> - добавляем кнопку "закрыть" (название кнопки можно поменять).
ОБРАТИТЕ ВНИМАНИЕ, что в кнопку тоже вписано ID области. без него кнопка работать не будет (без ID код "не понимает" какое именно окно мы пытаемся закрыть)
<button onclick="document.getElementById('akad').style.display='none'; return false;"> Закрыть</button>
Часть 3. Финальная часть - стилизация
<style type="text/css"><!--
#akad, #hladmore, #ovamertv, #ovderev, #kehu, #dikzem, #pustinya, #zalrus, #kian, #dagor {
position: absolute;
width: 500px;
height: 300px;
top: 35%;
left: 60%
border:solid #CCCCCC 3px;
display: none;
z-index: 10;
overflow:auto;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:10px;
}
--></style>
это css-код.
красное - это перечисление ВСЕХ ID, задействованных в меп-карте.
настраивайте - как хочется.
просто и легко у контейнера можно вписать фоновую картинку, поменять стиль/текст шрифта и т.п.
если есть потребность, то можно вдобавок разработать плавное появление окошечек и автомитическое закрытие по истечении времени. пишите в эту тему, если понадобится.
Куда вставлять?
А куда хотите )))
Можно html-верх, низ, форма ответа, таблица, страничка - как хотите.
Первые 2 части помешаются туда, где должна отображаться меп-карта.
css-код можно поместить в html-верх.
Важно знать только следующее:
Если вы вставляете код через функцию "Страницы", то помните, что сссылки на ваш форум и картинки, загруженные через форум работать не будут! и на самой мепке и в оконках.