[hideprofile]
[html]<style>@import url("https://forumstatic.ru/files/001c/63/27/99092.css");</style>
<div class="map">

  <div class="area_wrap" id="jade_sea">
   <div class="area" data-id="1">Изумрудное море</div>
   <div class="description" id="description-1">
    <h3>Температура воды зимой составляет от –0,5 до 0 °С <br>
Летом поверхностный слой прогрет до 23–26 °С. <br>Такие высокие температуры характерны только для верхнего 10–12-метрового слоя. <br>С ростом глубины температура уменьшается, достигая 8 °С на горизонте 60 м. <br> Основная масса воды глубже 100–150 м имеет температуру 8,5–9,2 °С. <br>
Изумрудном море водится более 180 различных видов рыб. <br>Некоторые из них:
Лобан, сельдь, луфарь, пеламида, сарган, осетр, белуга.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="luceras">
   <div class="area" data-id="2">Провинция Люцерас</div>
   <div class="description" id="description-2">
    <h3>Провинция в дальнем северо-западном углу Наварры. <br>
В данной провинции ранее находился самый большой и лучший порт королевства. <br>Портовые пути закрыты уже более 400 лет из-за военных действий. <br>Жители занимаются рыболовством и малым судостроением. <br>Также в данной провинции находится флот Наварры.<br>
Ранее использовавшийся язык старолюцерианский, ныне мертвый язык.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="monserrat">
   <div class="area" data-id="3">Монсеррат</div>
   <div class="description" id="description-3">
    <h3>Монтсеррат — передовой военный форпост.<br> Является частью восточного крыла наваррских вооруженных сил. <br>Он предназначен для ведения осад. <br>Находится в шести часах полета от военного колледжа Басгиат.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="signisen">
   <div class="area" data-id="4">Провинция Сигнисен</div>
   <div class="description" id="description-4">
    <h3><a href="">Провинция Сигнисен</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="morraine">
   <div class="area" data-id="5">Провинция Моррейн</div>
   <div class="description" id="description-5">
    <h3>Города отсутствуют, так как в данной провинции базируются военные и драконы.<br>
На территории провинции живут лишь те, кто помогает обеспечивать и снабжать провинцию необходимым, а так же те, кто занимается разведением и заготовкой скота для драконов. <br>
Мертвый язык моррейнский.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="jacobos">
   <div class="area" data-id="6">Река Якобос</div>
   <div class="description" id="description-6">
    <h3><a href="">Река Якобос</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="navarra">
   <div class="area" data-id="7">Наварра</div>
   <div class="description" id="description-7">
    <h3>Тип правления: монарший (Король Таури).<br>
Генерал всех вооруженных сил Наварры: Августин Мельгрен (всадник черного дракона Кодага)<br>
Наварра богата ресурсами: имеет сельскохозяйственные угодья, занимается скотоводством, а также изготовлением кожи и шерсти. <br>Большая часть территории королевства занимают леса и горы, отсюда и добыча древесины, а также горных ископаемых (железная руда, медь, свинец, золото, уголь, драгоценные камни).<br>
Страна имеет прямой выход к морю и океану, а также несколько крупных и малых рек, которые кристально чисты и богаты ресурсами (рыболовство). <br>
Действующие языки: наваррский<br>
Мертвые языки провинций:  старолюцерианский, моррейнский, кровланский <br></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="esben_mountains">
   <div class="area" data-id="8">Эсбенские горы</div>
   <div class="description" id="description-8">
    <h3><a href="">Эсбенские горы</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="valley">
   <div class="area" data-id="9">Долина</div>
   <div class="description" id="description-9">
    <h3>Долина находится за академией Басгиат; это место драконы называют своим домом.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="basgiat">
   <div class="area" data-id="10">Басгиат</div>
   <div class="description" id="description-10">
    <h3>Военная академия Басгиат — это единственное элитное учебное заведение в Наварре, которое готовит военнослужащих наваррской армии. <br>
Руководитель академии: действующий генерал Лилит Сорренгейл. <br>
Квадранты академии: пехота, писцы, целители, драконьи всадники. </h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="elsum">
   <div class="area" data-id="11">Провинция Эльсум</div>
   <div class="description" id="description-11">
    <h3>Данная провинция богата рудой и прочной древесиной, а также неисчерпаемыми запасами оленей и лосей. <br>Большая часть жителей работает на шахтах, занимается дикой охотой, а также собирательством ягод и грибов.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="chakir">
   <div class="area" data-id="12">Чакир</div>
   <div class="description" id="description-12">
    <h3>Небольшая деревня Чакир, недалеко от военного форпоста. <br>Рядом с деревней находятся шахты, в которых добывают драгоценные камни.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="dannes">
   <div class="area" data-id="13">Река Даннес</div>
   <div class="description" id="description-13">
    <h3><a href="">Река Даннес</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="bryevik">
   <div class="area" data-id="14">Провинция Брайевик</div>
   <div class="description" id="description-14">
    <h3><a href="">Провинция Брайевик</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="anka">
   <div class="area" data-id="15">Анка</div>
   <div class="description" id="description-15">
    <h3><a href="">Анка</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="zolia">
   <div class="area" data-id="16">Золия (Клиффсбейн)</div>
   <div class="description" id="description-16">
    <h3><a href="">Золия (Клиффсбейн)</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="samarra">
   <div class="area" data-id="17">Сэмарра</div>
   <div class="description" id="description-17">
    <h3>Военный форпост</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="sumerton">
   <div class="area" data-id="18">Сумертон</div>
   <div class="description" id="description-18">
    <h3>Не большая деревня</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="stonewater">
   <div class="area" data-id="19">Река Стоунвотер</div>
   <div class="description" id="description-19">
    <h3><a href="">Река Стоунвотер</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="deaconshire">
   <div class="area" data-id="20">Провинция Диконшир</div>
   <div class="description" id="description-20">
    <h3><a href="">Провинция Диконшир</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="calldear">
   <div class="area" data-id="21">Коллдир</div>
   <div class="description" id="description-21">
    <h3>Самый маленький город в королевстве является столицей Наварры, тут живет королевская семья.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="p_calldear">
   <div class="area" data-id="22">Провинция Коллдир</div>
   <div class="description" id="description-22">
    <h3>Самая маленькая западная провинция королевства Наварры. <br>Граничит с Люцерасом на северо-востоке и Тиррендором на юге.<br>
Большая часть жителей данной провинции активно занимается рыболовством и судостроением.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="tirrendor">
   <div class="area" data-id="23">Провинция Тиррендор</div>
   <div class="description" id="description-23">
    <h3>Самая крупная провинция, состоит из горной местности, граничит с Изумрудным морем на западе и Арктическим океаном на юге. <br>
Тиррендор была единственной провинцией, предпринявшей попытку отделения в 627 году н.э. (шесть лет назад). <br>Если бы эта попытка увенчалась успехом, это оставило бы Наварру беззащитной перед Поромиэлем. <br>Целью восстания было провозглашение независимости Тиррендора и превращение Аретии в столицу нового королевства;<br>
Аретия была сожжена в ходе подавления восстания, хотя многие здания сохранились, потому что были сделаны из камня. Затем провинцией начал управлять город Левеллен.
</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="levellin">
   <div class="area" data-id="24">Левеллин</div>
   <div class="description" id="description-24">
    <h3><a href="">Левеллин</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="aretia">
   <div class="area" data-id="25">Аретия</div>
   <div class="description" id="description-25">
    <h3>Официально не существует уже 6 лет. <br>
Во время восстания был сожжен драконами. <br>
Аретия расположена на востоке, в нескольких часах полета от скал Дралора; <br>Город не находится под защитой магического барьера и никак не охраняется военными, так как находится слишком далеко от гарнизона.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="dralore">
   <div class="area" data-id="26">Утёсы Дралора</div>
   <div class="description" id="description-26">
    <h3><a href="">Утёсы Дралора</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="medaro">
   <div class="area" data-id="27">Перевал Медаро</div>
   <div class="description" id="description-27">
    <h3><a href="">Перевал Медаро</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="draytus">
   <div class="area" data-id="28">Дрейтус</div>
   <div class="description" id="description-28">
    <h3><a href="">Дрейтус</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="aldibann">
   <div class="area" data-id="29">Альдибанн</div>
   <div class="description" id="description-29">
    <h3><a href="">Альдибанн</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="resson">
   <div class="area" data-id="30">Рессон</div>
   <div class="description" id="description-30">
    <h3><a href="">Рессон</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="pavis">
   <div class="area" data-id="31">Пэвис</div>
   <div class="description" id="description-31">
    <h3><a href="">Пэвис</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="crovla">
   <div class="area" data-id="32">Провинция Кровла</div>
   <div class="description" id="description-32">
    <h3><a href="">Провинция Кровла</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="cordin">
   <div class="area" data-id="33">Кордин</div>
   <div class="description" id="description-33">
    <h3><a href="">Кордин</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="maleka">
   <div class="area" data-id="34">Залив Малека</div>
   <div class="description" id="description-34">
    <h3><a href="">Залив Малека</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="poromiel">
   <div class="area" data-id="35">Поромиэль</div>
   <div class="description" id="description-35">
    <h3>Поромиэль (королевство, которое использует помощь грифонов в войне с соседями) — небольшое королевство, разделённое на три провинции.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="hollows">
   <div class="area" data-id="36">Пустоши</div>
   <div class="description" id="description-36">
    <h3>Ранее процветающее королевство, которое развязало магическую войну более 600 лет назад, славилось высокой религиозностью и огромными храмами, в особенности храмом Амари. <br>Ныне это пустое, непригодное для жизни место.</h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

  <div class="area_wrap" id="arctile">
   <div class="area" data-id="37">Океан Арктайл</div>
   <div class="description" id="description-37">
    <h3><a href="">Океан Арктайл</a></h3>
    <button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
   </div>
  </div>

</div>

<script>
  $(document).ready(function () {
   $(".area").on("click", function () {
    var id = $(this).data("id");
    var targetDescription = $("#description-" + id);
    var targetArea = $(this);

    // Закрываем все открытые описания и снимаем класс active с area
    $(".description").not(targetDescription).fadeOut(600);
    $(".area").not(targetArea).removeClass("active");

    // Переключаем текущее описание
    if (targetDescription.is(":visible")) {
     targetDescription.fadeOut(600);
     targetArea.removeClass("active");
    } else {
     targetDescription.fadeIn(600);
     targetArea.addClass("active");
    }
   });

   // Закрытие по кнопке "Close"
   $(".description .close").on("click", function () {
    var targetDescription = $(this).closest(".description");
    var id = targetDescription.attr("id").split("-")[1];
    var targetArea = $(".area[data-id='" + id + "']");

    targetDescription.fadeOut(600);
    targetArea.removeClass("active");
   });
  });
</script>[/html]