Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Мепкарта с всплывающими разделами (с) Герда


Мепкарта с всплывающими разделами (с) Герда

Сообщений 1 страница 5 из 5

1

Часть 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>
......

разберем подробнее, что же это за страшная вещь такая. http://i.smiles2k.net/aiwan_smiles/wink.gif

<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, задействованных в меп-карте.
настраивайте - как хочется. http://i.smiles2k.net/aiwan_smiles/wink.gif
просто и легко у контейнера можно вписать фоновую картинку, поменять стиль/текст шрифта и т.п.

если есть потребность, то можно вдобавок разработать плавное появление окошечек и автомитическое закрытие по истечении времени. пишите в эту тему, если понадобится. http://i.smiles2k.net/aiwan_smiles/smile3.gif


Куда вставлять?

А куда хотите )))
Можно html-верх, низ, форма ответа, таблица, страничка - как хотите.
Первые 2 части помешаются туда, где должна отображаться меп-карта.
css-код можно поместить в html-верх.

Важно знать только следующее:
Если вы вставляете код через функцию "Страницы", то помните, что сссылки на ваш форум и картинки, загруженные через форум работать не будут! и на самой мепке и в оконках.

источник

+2

2

В пример можно увидеть?

0

3

Доброго дня вам, госпожа Герда.
Хотел бы спросить, нельзя ли эту же уловку приспособить к контейнеру со вкладками?
Как я понимаю, это по меньшей мере на порядок сложнее, но, к сожалению, я недостаточно хорошо знаю jQuery, чтобы правильно обратиться к области на map-карте. Я был бы очень рад помощи и объяснениям, потому что мне очень интересно научиться это делать. Согласитесь, при этом объявление будет выглядеть намного эффектнее, потому что всплывающие разделы частично перекрывают изображение, что выглядит не слишком притязательно. Намного красивее было бы, если бы смена текста происходила в одном и том же контейнере в зависимости от того, на какую область нажал пользователь.
Я очень надеюсь получить на свое сообщение ответ.

0

4

Ханако
пример карты можно посмотреть тут: http://lastchanse.ru/pages/karta_mista
изначально для них и придумывала эту чтуку. :)

Януш

для того, чтоб ориентироваться в создании меп-карты, jQuery знать не нужно. только если есть желание ее "апгрейдить" разве что.
если вы хотите вставить меп-карту в контейнер с вкладками, просто создаете вкладку - и запихиваете в нее html-код меп-карты.
однако есть один ньюанс: окошки за пределы контейнера "заплывать" не будут. поэтому надо делать так, чтобы места на все хватило.

Отредактировано Герда (15.06.2011 15:23:39)

0

5

Аеее, спасибо Герда. :* Пригодится для ролевой.

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Мепкарта с всплывающими разделами (с) Герда


Рейтинг форумов | Создать форум бесплатно