допом
музей истории магии?
map
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться12024-01-07 01:05:05
- Администратор
- Сообщений: 469
- Уважение: [+0/-0]
Поделиться22024-01-08 12:57:20
- Администратор
- Сообщений: 469
- Уважение: [+0/-0]
[html]
<head>
<style>
/* Стилизация контейнера карты */
.map-container {
position: relative;
display: block;
max-width: 100%; /* Максимальная ширина - не более ширины контейнера */
}
/* Стилизация изображения карты */
.map-container img {
width: 100%; /* Ширина изображения подстраивается под ширину контейнера */
height: auto; /* Высота изображения изменяется пропорционально ширине */
}
/* Стиль для области наведения */
.hover-area {
position: absolute;
background: rgba(255, 255, 255, 0); /* Полупрозрачный фон для наглядности */
}
/* Стиль для всплывающего текста */
.hover-text {
visibility: hidden;
min-width: 150px; /* Минимальная высота */
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%; /* Позиционирует всплывающее окно ниже привязанного элемента */
left: 50%;
transform: translate(-40%, 0); /* Центрирование по горизонтали и не изменять положение по вертикали */
opacity: 0;
transition: opacity 0.3s;
word-wrap: break-word;
}
/* Отображение всплывающего текста при наведении */
.hover-area:hover .hover-text {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="map-container">
<img src="https://i.imgur.com/UrtlwcX.png" alt="Diagon Alley Map">
<!-- Область для The Leaky Cauldron -->
<div class="hover-area" style="left: 5%; top: 40%; width: 10%; height: 10%;">
<div class="hover-text">The Leaky Cauldron [Дырявый котёл]</div>
</div>
<!-- Область для Cobb & Webb's -->
<div class="hover-area" style="left: 25%; top: 70%; width: 5%; height: 5%;">
<div class="hover-text">Cobb & Webb's [У Кобба и Уэбба]</div>
</div>
<!-- Область для Belby's shelter -->
<div class="hover-area" style="left: 15%; top: 68%; width: 5%; height: 5%;">
<div class="hover-text">Belby's shelter [Ночлежка Белби]</div>
</div>
<!-- Область для Chimney Sweep Elf -->
<div class="hover-area" style="left: 18%; top: 58%; width: 4%; height: 4%;">
<div class="hover-text">Chimney Sweep Elf [Эльф-трубочист]</div>
</div>
<!-- Область для Terror Tours -->
<div class="hover-area" style="left: 14%; top: 56%; width: 4%; height: 4%;">
<div class="hover-text">Terror Tours [Туристическое агенство]</div>
</div>
<!-- Область для McHavelock's Wizarding Headgear -->
<div class="hover-area" style="left: 30%; top: 67%; width: 4%; height: 4%;">
<div class="hover-text">McHavelock's Wizarding Headgear [Волшебные головные уборы Макхэвелока]</div>
</div>
<!-- Область для Ye Olde Curiosity Shop -->
<div class="hover-area" style="left: 32%; top: 71%; width: 4%; height: 4%;">
<div class="hover-text">Ye Olde Curiosity Shop [Лавка древностей]</div>
</div>
<!-- Область для The Spiny Serpent -->
<div class="hover-area" style="left: 34%; top: 67%; width: 4%; height: 4%;">
<div class="hover-text">The Spiny Serpent [Спини Серпент]</div>
</div>
<!-- Область для Borgin and Burkes -->
<div class="hover-area" style="left: 40%; top: 67%; width: 4%; height: 4%;">
<div class="hover-text">Borgin and Burkes [Боргин и Бёрк]</div>
</div>
<!-- Область для Moribund's -->
<div class="hover-area" style="left: 39%; top: 74%; width: 4%; height: 4%;">
<div class="hover-text">Moribund's [У Морибанда]</div>
</div>
<!-- Область для Dystyl Phaelanges -->
<div class="hover-area" style="left: 41%; top: 79%; width: 4%; height: 4%;">
<div class="hover-text">Dystyl Phaelanges [Дистальная фаланга]</div>
</div>
<!-- Область для Beard Trimming -->
<div class="hover-area" style="left: 40%; top: 90%; width: 4%; height: 4%;">
<div class="hover-text">Batworthy Beard Trimming [Цирюльня Бэтворфи]</div>
</div>
<!-- Область для Betting shop -->
<div class="hover-area" style="left: 45%; top: 90%; width: 4%; height: 4%;">
<div class="hover-text">Betting shop [Букмекерская контора]</div>
</div>
<!-- Область для Shyverwretch's Venoms and Poisons-->
<div class="hover-area" style="left: 46%; top: 86%; width: 4%; height: 4%;">
<div class="hover-text">Shyverwretch's Venoms and Poisons [Яды и отравы Шайверетча]</div>
</div>
<!-- Область для Noggin and Bonce -->
<div class="hover-area" style="left: 52%; top: 87%; width: 4%; height: 4%;">
<div class="hover-text">Noggin and Bonce [Ноггин и Боунс]</div>
</div>
<!-- Область для Markus Scarrs Indelible Tattoos -->
<div class="hover-area" style="left: 56%; top: 91%; width: 4%; height: 4%;">
<div class="hover-text">Markus Scarrs Indelible Tattoos [Тату-салон Маркуса Скаррса]</div>
</div>
<!-- Область для Potage's Cauldron Shop -->
<div class="hover-area" style="left: 60%; top: 94%; width: 4%; height: 4%;">
<div class="hover-text">Potage's Cauldron Shop [Котлы Потаж]</div>
</div>
<!-- Область для E.L.M. -->
<div class="hover-area" style="left: 61%; top: 88%; width: 4%; height: 4%;">
<div class="hover-text">E.L.M. [Ваолшебные похороны и бальзамирование]</div>
</div>
<!-- Область для The Coffin Shop -->
<div class="hover-area" style="left: 60%; top: 81%; width: 4%; height: 4%;">
<div class="hover-text">The Coffin Shop [Лавка Коффина]</div>
</div>
<!-- Область для Fledermaus and Tanner Bats & Skins -->
<div class="hover-area" style="left: 65%; top: 95%; width: 4%; height: 4%;">
<div class="hover-text">Fledermaus and Tanner Bats & Skins [Флидермаус и Таннер]</div>
</div>
<!-- Область для Tallow and Hemp Toxic Tapers -->
<div class="hover-area" style="left: 64%; top: 82%; width: 4%; height: 4%;">
<div class="hover-text">Tallow and Hemp Toxic Tapers [Тэллоу и Хемп]</div>
</div>
<!-- Область для Trackleshanks Locksmith -->
<div class="hover-area" style="left: 68%; top: 84%; width: 4%; height: 4%;">
<div class="hover-text">Trackleshanks Locksmith [Слесарная мастерская]</div>
</div>
<!-- Область для Flimflam's Lanterns -->
<div class="hover-area" style="left: 69%; top: 80%; width: 4%; height: 4%;">
<div class="hover-text">Flimflam's Lanterns [Фонари Флимфлама]</div>
</div>
<!-- Область для Gringotts Wizarding Bank -->
<div class="hover-area" style="left: 80%; top: 75%; width: 15%; height: 15%;">
<div class="hover-text">Gringotts Wizarding Bank [Гринготтс]</div>
</div>
<!-- Область для Ollivander's Wand Shop -->
<div class="hover-area" style="left: 66%; top: 63%; width: 4%; height: 4%;">
<div class="hover-text">Ollivander's Wand Shop [Лавка Олливандера]</div>
</div>
<!-- Область для Rosa Lee Teabag -->
<div class="hover-area" style="left: 62%; top: 60%; width: 4%; height: 4%;">
<div class="hover-text">Rosa Lee Teabag [Чайная Розы Ли]</div>
</div>
<!-- Область для Obscurus Books -->
<div class="hover-area" style="left: 57%; top: 58%; width: 4%; height: 4%;">
<div class="hover-text">Obscurus Books [Издательство Обскурус]</div>
</div>
<!-- Область Gambol & Japes Wizarding Joke Shop -->
<div class="hover-area" style="left: 56%; top: 55%; width: 5%; height: 5%;">
<div class="hover-text">Gambol & Japes Wizarding Joke Shop [Магазин приколов Гэмбла и Джейпса]</div>
</div>
<!-- Область для Twilfitt and Tattings -->
<div class="hover-area" style="left: 51%; top: 53%; width: 4%; height: 4%;">
<div class="hover-text">Twilfitt and Tattings [Твилфитт и Таттинг]</div>
</div>
<!-- Область Second Hand Brooms -->
<div class="hover-area" style="left: 46%; top: 48%; width: 5%; height: 5%;">
<div class="hover-text">Second Hand Brooms [Мётлы «из рук в руки»]</div>
</div>
<!-- Область Amanuensis Quills -->
<div class="hover-area" style="left: 42%; top: 44%; width: 5%; height: 5%;">
<div class="hover-text">Amanuensis Quills [Перья Амануэнсиса]</div>
</div>
<!-- Область Madam Malkin's Robes for all Occasions -->
<div class="hover-area" style="left: 38%; top: 44%; width: 5%; height: 5%;">
<div class="hover-text">Madam Malkin's Robes for all Occasions [Магазин мадам Малкин]</div>
</div>
<!-- Область Magical Menagerie -->
<div class="hover-area" style="left: 32%; top: 45%; width: 5%; height: 5%;">
<div class="hover-text">Magical Menagerie [Волшебный зверинец]</div>
</div>
<!-- Область Quality Quidditch Supplies -->
<div class="hover-area" style="left: 27%; top: 47%; width: 5%; height: 5%;">
<div class="hover-text">Quality Quidditch Supplies [Всё для квиддича]</div>
</div>
<!-- Область Scribbulus Writing Implements -->
<div class="hover-area" style="left: 21%; top: 52%; width: 5%; height: 5%;">
<div class="hover-text">Scribbulus Writing Implements [Лавка письменных принадлежностей]</div>
</div>
<!-- Область The Black Forest -->
<div class="hover-area" style="left: 24%; top: 62%; width: 5%; height: 5%;">
<div class="hover-text">The Black Forest [Блэк Форест бар]</div>
</div>
<!-- Область Wizarding Supplies -->
<div class="hover-area" style="left: 39%; top: 56%; width: 5%; height: 5%;">
<div class="hover-text">Wizarding Supplies [Волшебные принадлежности]</div>
</div>
<!-- Область The Starry Prophesier -->
<div class="hover-area" style="left: 48%; top: 70%; width: 3%; height: 3%;">
<div class="hover-text">The Starry Prophesier [Ясновидец]</div>
</div>
<!-- Область Pawnbrokers -->
<div class="hover-area" style="left: 49%; top: 75%; width: 3%; height: 3%;">
<div class="hover-text">Pawnbrokers [Ломбард]</div>
</div>
<!-- Область Sombrero de Cabrera -->
<div class="hover-area" style="left: 49%; top: 60%; width: 4%; height: 4%;">
<div class="hover-text">Sombrero de Cabrera [Сомбреро от Кабрера]</div>
</div>
<!-- Область The White Wyvern -->
<div class="hover-area" style="left: 55%; top: 78%; width: 4%; height: 4%;">
<div class="hover-text">The White Wyvern [Белая виверна]</div>
</div>
<!-- Область The secret bar -->
<div class="hover-area" style="left: 58%; top: 71%; width: 4%; height: 4%;">
<div class="hover-text">The secret bar [Бар ***]</div>
</div>
<!-- Область Mr. Mulpepper's Apothecary -->
<div class="hover-area" style="left: 64%; top: 70%; width: 4%; height: 4%;">
<div class="hover-text">Mr. Mulpepper's Apothecary [Аптека Малпеппера]</div>
</div>
<!-- Область для Potage's Cauldron Shop Diagon -->
<div class="hover-area" style="left: 15%; top: 42%; width: 4%; height: 4%;">
<div class="hover-text">Potage's Cauldron Shop [Котлы Потаж]</div>
</div>
<!-- Область для Wiseacre's Wizarding Equipment -->
<div class="hover-area" style="left: 18%; top: 38%; width: 4%; height: 4%;">
<div class="hover-text">Wiseacre's Wizarding Equipment [Волшебное оборудование для умников]</div>
</div>
<!-- Область для Eeylop's Owl Emporium -->
<div class="hover-area" style="left: 24%; top: 37%; width: 4%; height: 4%;">
<div class="hover-text">Eeylop's Owl Emporium [Торговый центр «Совы»]</div>
</div>
<!-- Область для Flourish and Blotts -->
<div class="hover-area" style="left: 28%; top: 34%; width: 4%; height: 4%;">
<div class="hover-text">Flourish and Blotts [Флориш и Блоттс]</div>
</div>
<!-- Область для Florean Fortescue's ice-cream parlour -->
<div class="hover-area" style="left: 33%; top: 32%; width: 4%; height: 4%;">
<div class="hover-text">Florean Fortescue's ice-cream parlour [Флориана Фортескью]</div>
</div>
<!-- Область для Second-Hand Bookshop -->
<div class="hover-area" style="left: 37%; top: 28%; width: 4%; height: 4%;">
<div class="hover-text">Second-Hand Bookshop [Букинистический магазин]</div>
</div>
<!-- Область для Slug & Jiggers Apothecary -->
<div class="hover-area" style="left: 41%; top: 20%; width: 4%; height: 4%;">
<div class="hover-text">Slug & Jiggers Apothecary [Аптека «Слизень и Джиггер»]</div>
</div>
<!-- Область Mr. Mulpepper's Apothecary Diagon -->
<div class="hover-area" style="left: 43%; top: 13%; width: 4%; height: 4%;">
<div class="hover-text">Mr. Mulpepper's Apothecary [Аптека Малпеппера]</div>
</div>
<!-- Область The Junk Shop -->
<div class="hover-area" style="left: 48%; top: 36%; width: 4%; height: 4%;">
<div class="hover-text">The Junk Shop [Лавка старьёвщика]</div>
</div>
<!-- Область Second-Hand Robes -->
<div class="hover-area" style="left: 52%; top: 38%; width: 4%; height: 4%;">
<div class="hover-text">Second-Hand Robes [Мантии «Из рук в руки»]</div>
</div>
<!-- Область The Hopping Pot -->
<div class="hover-area" style="left: 52%; top: 25%; width: 4%; height: 4%;">
<div class="hover-text">The Hopping Pot [Бар «Скачущий горшок»]</div>
</div>
<!-- Область Stowe & Packers Magical Bags -->
<div class="hover-area" style="left: 50%; top: 13%; width: 4%; height: 4%;">
<div class="hover-text">Stowe & Packers Magical Bags [Волшебные сумки Стоува и Пэкерса]</div>
</div>
<!-- Область Bowman E. Wright Blacksmith -->
<div class="hover-area" style="left: 53%; top: 13%; width: 4%; height: 4%;">
<div class="hover-text">Bowman E. Wright Blacksmith [Кузнечная лавка Райта]</div>
</div>
<!-- Область Globus Mundi Travel Agents -->
<div class="hover-area" style="left: 54%; top: 5%; width: 4%; height: 4%;">
<div class="hover-text">Globus Mundi Travel Agents [Туристическое агенство Глобус Мунди]</div>
</div>
<!-- Область Sugarplum's Sweets Shop -->
<div class="hover-area" style="left: 59%; top: 40%; width: 4%; height: 4%;">
<div class="hover-text">Sugarplum's Sweets Shop [Кондитерская Шугарплама]</div>
</div>
<!-- Область The Ministry Press -->
<div class="hover-area" style="left: 62%; top: 43%; width: 3%; height: 3%;">
<div class="hover-text">The Ministry Press [Печать Министерства]</div>
</div>
<!-- Область Madam Primpernelle's Beautifying Potions -->
<div class="hover-area" style="left: 74%; top: 50%; width: 4%; height: 4%;">
<div class="hover-text">Madam Primpernelle's Beautifying Potions [Омолаживающие зелья мадам Примпернель]</div>
</div>
<!-- Область Concordia and Plunkett Musical Instruments -->
<div class="hover-area" style="left: 59%; top: 33%; width: 3%; height: 3%;">
<div class="hover-text">Concordia and Plunkett Musical Instruments [Музыкальные инструменты Конкордия и Планкетт]</div>
</div>
<!-- Область Shutterbutton's Photography Studio -->
<div class="hover-area" style="left: 62%; top: 34%; width: 3%; height: 3%;">
<div class="hover-text">Shutterbutton's Photography Studio [Фотостудия Шаттербаттона]</div>
</div>
<!-- Область Floriblunders Florist -->
<div class="hover-area" style="left: 67%; top: 38%; width: 3%; height: 3%;">
<div class="hover-text">Floriblunders Florist [Цветы у Флорибландерса]</div>
</div>
<!-- Область Gringotts Money Exchange -->
<div class="hover-area" style="left: 71%; top: 39%; width: 3%; height: 3%;">
<div class="hover-text">Gringotts Money Exchange [Обмен валюты]</div>
</div>
<!-- Область House-Elf Placement Agency -->
<div class="hover-area" style="left: 72%; top: 35%; width: 3%; height: 3%;">
<div class="hover-text">House-Elf Placement Agency [Агентство по трудоустройству домашних эльфов]</div>
</div>
<!-- Область Cogg and Bell Clockmakers -->
<div class="hover-area" style="left: 73%; top: 30%; width: 3%; height: 3%;">
<div class="hover-text">Cogg and Bell Clockmakers [Часовщики Когг и Белл]</div>
</div>
<!-- Область Weeoanwhisker's Barber Shop -->
<div class="hover-area" style="left: 76%; top: 38%; width: 5%; height: 3%;">
<div class="hover-text">Weeoanwhisker's Barber Shop [Парикмахерская Уиоанвискера]</div>
</div>
<!-- Область Jellied Eel Shop -->
<div class="hover-area" style="left: 62%; top: 3%; width: 4%; height: 4%;">
<div class="hover-text">Jellied Eel Shop [Магазин с заливными угрями]</div>
</div>
<!-- Область Wands by Gregorovitch -->
<div class="hover-area" style="left: 65%; top: 5%; width: 4%; height: 4%;">
<div class="hover-text">Wands by Gregorovitch [Волшебные палочки Григоровича]</div>
</div>
<!-- Область Owl Post Office -->
<div class="hover-area" style="left: 68%; top: 6%; width: 4%; height: 4%;">
<div class="hover-text">Owl Post Office [Совиная почта]</div>
</div>
<!-- Область Eternelle's Elixir of Refreshment -->
<div class="hover-area" style="left: 62%; top: 20%; width: 4%; height: 4%;">
<div class="hover-text">Eternelle's Elixir of Refreshment [Освежающий эликсир Этернель]</div>
</div>
<!-- Область Dr Filibuster's Fireworks -->
<div class="hover-area" style="left: 72%; top: 7%; width: 4%; height: 4%;">
<div class="hover-text">Dr Filibuster's Fireworks [Фейерверки доктора Флибустьера]</div>
</div>
<!-- Область Museum of Muggle Curiosities -->
<div class="hover-area" style="left: 75%; top: 20%; width: 4%; height: 4%;">
<div class="hover-text">Museum of Muggle Curiosities [Музей магловских диковинок]</div>
</div>
<!-- Область The Fountain of Fair Fortune -->
<div class="hover-area" style="left: 80%; top: 20%; width: 4%; height: 4%;">
<div class="hover-text">The Fountain of Fair Fortune [Фонтан феи Фортуны]</div>
</div>
<!-- Область Tobacconist -->
<div class="hover-area" style="left: 82%; top: 11%; width: 4%; height: 4%;">
<div class="hover-text">Tobacconist [Табачник]</div>
</div>
<!-- Область The Daily Prophet -->
<div class="hover-area" style="left: 82%; top: 45%; width: 4%; height: 4%;">
<div class="hover-text">The Daily Prophet [Редакция Ежедневного Пророка]</div>
</div>
<!-- Область Whizz Hard Books -->
<div class="hover-area" style="left: 87%; top: 46%; width: 4%; height: 4%;">
<div class="hover-text">Whizz Hard Books [Издательство Уизза Харда]</div>
</div>
<!-- Область Pilliwinkle's Playthings -->
<div class="hover-area" style="left: 83%; top: 28%; width: 4%; height: 4%;">
<div class="hover-text">Pilliwinkle's Playthings [Игрушки Пиллиуинкла]</div>
</div>
</div>
</body>[/html]
Не пристроены:
На Каркитте_Горизонтальной - Wickermore's - продают свечи
Pilliwinkle's Playthings [Игрушки Пиллиуинкла]
владелец:
сотрудники:
Поделиться32024-02-25 16:44:30
- Администратор
- Сообщений: 469
- Уважение: [+0/-0]
// SHOP NAME | ВЛАДЕЛЕЦ: |
Страница: 1
