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

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

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

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

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



Мепкарта с всплывающими разделами (JS, CSS, HTML)

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

1

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

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

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

Идея этой штуки принадлежит Loran Deon

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

+1

2

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

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

0