ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

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

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



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

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

1

Копируете/размещаете информацию из этой статьи? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТРАНИЦУ и указывайте автора!!!

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

https://forumupload.ru/uploads/0007/e3/f7/2617/184779.png

Посмотреть, что это такое можно здесь: http://oaotr.0pk.ru/pages/mepkarta
Идея этой штуки принадлежит Loran Deon

демо

[html]<p style="text-align: center;"><img style="vertical-align: middle;" usemap="#MAP" src="http://s015.radikal.ru/i331/1010/20/a187af62ab7a.jpg" 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="Остров Дерева" />
<area onclick="document.getElementById('kehu').style.display='block'; return false;" shape="rect" coords="399,192,501,251" href="#" alt="Кёху" />
<area onclick="document.getElementById('dikzem').style.display='block'; return false;" shape="rect" coords="595,196,659,320" href="#" alt="Дикие земли" />
<area onclick="document.getElementById('pustinya').style.display='block'; return false;" shape="rect" coords="608,435,691,354" href="#" alt="Пустыня" />
<area onclick="document.getElementById('zalrus').style.display='block'; return false;" shape="rect" coords="421,403,520,473" href="#" alt="Залив русалок" />
<area onclick="document.getElementById('kian').style.display='block'; return false;" shape="rect" coords="280,467,393,525" href="#" alt="Киан" />
<area onclick="document.getElementById('dagor').style.display='block'; return false;" shape="rect" coords="37,274,146,344" href="#" alt="Дагор" />
</map>
</p>
<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="kehu" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('kehu').style.display='none'; return false;"> Закрыть</button></div>
<div id="dikzem" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('dikzem').style.display='none'; return false;"> Закрыть</button></div>
<div id="pustinya" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('pustinya').style.display='none'; return false;"> Закрыть</button></div>
<div id="zalrus" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('zalrus').style.display='none'; return false;"> Закрыть</button></div>
<div id="kian" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('kian').style.display='none'; return false;"> Закрыть</button></div>
<div id="dagor" style="display: none;">Здесь может находиться любой текст в формате html<br /> <button onclick="document.getElementById('dagor').style.display='none'; return false;"> Закрыть</button></div>
<p>
<style type="text/css">
#akad {
background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg);
position: absolute;
width: 500px;
height: 300px;
top: 65%;
left: 60%
border:solid #CCCCCC 3px;
display: none;
z-index: 10;
overflow:auto;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:10px;
}

#hladmore {
background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg);
position: absolute;
width: 500px;
height: 300px;
top: 60%;
left: 60%
border:solid #CCCCCC 3px;
display: none;
z-index: 10;
overflow:auto;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:10px;
}

#ovamertv {
background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg);
position: absolute;
width: 500px;
height: 300px;
top: 55%;
left: 60%
border:solid #CCCCCC 3px;
display: none;
z-index: 10;
overflow:auto;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:10px;
}

#ovderev {
background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg);
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 60%
border:solid #CCCCCC 3px;
display: none;
z-index: 10;
overflow:auto;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:10px;
}

#kehu {
background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg);
position: absolute;
width: 500px;
height: 300px;
top: 45%;
left: 60%
border:solid #CCCCCC 3px;
display: none;
z-index: 10;
overflow:auto;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:10px;
}

#dikzem {
background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg);
position: absolute;
width: 500px;
height: 300px;
top: 40%;
left: 60%
border:solid #CCCCCC 3px;
display: none;
z-index: 10;
overflow:auto;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:10px;
}
#pustinya { background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg); 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; }
#zalrus { background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg); position: absolute; width: 500px; height: 300px; top: 30%; left: 60% border:solid #CCCCCC 3px; display: none; z-index: 10; overflow:auto; background-color:#FFFFFF; color:#000000; text-align:center; padding:10px; }
#kian { background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg); position: absolute; width: 500px; height: 300px; top: 25%; left: 60% border:solid #CCCCCC 3px; display: none; z-index: 10; overflow:auto; background-color:#FFFFFF; color:#000000; text-align:center; padding:10px; }
#dagor { background: url(http://allday.ru/uploads/posts/2009-04/ … s-mix4.jpg); position: absolute; width: 500px; height: 300px; top: 20%; left: 60% border:solid #CCCCCC 3px; display: none; z-index: 10; overflow:auto; background-color:#FFFFFF; color:#000000; text-align:center; padding:10px; }</style>[/html]

Часть 1. Оформление кода меп-карты

Как создать код меп-карты написано здесь: Создаём меп-карту
Необходимо добавить в код мепки следующее:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Выделенное жирным - это уникальное ID для области (любой набор латинских символов)

Часть 2. Добавление контейнеров (всплывающих окошек) и заполнение оных

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

<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. Финальная часть - стилизация

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

это css-код.
красное - это перечисление ВСЕХ ID, задействованных в меп-карте.
настраивайте - как хочется. http://i.smiles2k.net/aiwan_smiles/wink.gif
просто и легко у контейнера можно вписать фоновую картинку, поменять стиль/текст шрифта и т.п.

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


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

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

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

Отредактировано Герда (11.11.12 13:07)

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

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

+1

2

Все получается, все работает. Но есть вопросы на счет самих окон. А точнее, их стилизации.
Вот какое дело:
Нужно, чтобы окошку можно было прописать плавное появление и именно в точке щелчка мыши или же около самой точки-ссылки на мэп-карте.
Также можно ли стилизовать кнопку? То-есть заменить ее на картинку?
Также встает вопрос о положении самой кнопки - хотелось бы, чтобы кнопке можно было задать точное положение в окошке.

Это можно реализовать?
Если да, то можете показать или подсказать, как и каким кодом?

0