Что-то не получается отредактировать предыдущий пост, видимо, из-за давности, потому пишу так.
У меня по работе возникла похожая задача, и я после экспериментов пришел к выводу, что все-таки лучше использовать растровую графику, а не векторную. Потому вот вам (смотрите аттач) другое решение, а теперь о том, как оно работает:
HTML:
<div id="page">
<div id="map">
<div class="obl_image" id="kievskaya">
<a href="#" class="pointer" rel="kievskaya_desc"></a>
</div>
</div>
<div id="descriptions">
<div class="description" id="kievskaya_desc">
<h2>Заголовок</h2>
<p>Описание</p>
</div>
</div>
</div>
В этом примере я оставил только одну область, чтобы было понятнее. Как видите, для самой карты у нас есть родительский блок (div id="
map"), который содержит другие блоки (class="
obl_image" id="
kievskaya"). Атрибут class мы используем потому, что некоторые свойства у всех областей будут одинаковыми, и чтобы не писать их по двадцать раз, мы в css их запишем одним правилом:
Код:
.obl_image {
position: absolute;
background-color: transparent;
background-position: top left;
background-repeat: no-repeat;
}
А атрибут id мы используем уже для точных правил для каждой области (фоновый рисунок ведь разных у всех областей).
В каждом блоке есть еще гиперссылка с указанным атрибутом
rel. Это значение связывает эту ссылку с описанием представительств области:
Код:
<a href="#" class="pointer" rel="[COLOR='DarkRed']kievskaya_desc[/COLOR]"></a>
<div class="description" id="[COLOR='DarkRed']kievskaya_desc[/COLOR]">
При помощи jQuery мы будем подгружать нужное описание при нажатии на нужную ссылку.
С его же помощью при наведении на ссылку мы дописываем блоку с областью класс
hovered, а при нажатии —
clicked. Каждый из этих классов изменяет фоновое изображение блока. (по уму нужно было бы сделать это все на спрайтах, но у меня не было времени считать сдвиги background-position, так как у меня и так ушло 40 минут на расстановку картинок областей и ссылок по местам).
Собственно, это все. Если вам нужна карта других размеров, вам нужно будет нарезать картинки областей и переписать css под новые размеры. Для нарезки я пользовался inkscape, а саму карту нашел в интернетах (на википедии, кажется). Открыл карту в inkscape, она оказалась уже поделенной на области, так что дальше оставалось только экспортировать области в растр в формате png с прозрачностью.
Преимущества у метода те же: весь текст постоянно находится на странице (в отличии от flash). Плюс, в отличии от векторного варианта, вы можете теперь раскрасить области как хотите (можете все в один цвет, как в моем примере, можете проявить художественный вкус и окрасить все области разными цветами, а то и вообще залить текстурой).
Если в какой-то области у вас нет представительства, просто уберите ссылку внутри блока с этой областью: (<a href="#" class="pointer" rel="kievskaya_desc"></a>).
В архиве в папке images есть изображения для трех состояний каждой области: inactive, hover, click. Можете сделать еще одно состояние, чтобы красить области без ваших представительств в свой собственный цвет (с CSS разберетесь, там ничего сложного).
P.S.: карта какая-то эмо-подобная получилась.
