API tools faq
paste
Advertisement
eg0rmaffin

html doc

eg0rmaffin
May 4th, 2023 (edited)
858
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.    
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.  
  9.   </head>
  10.   <body>
  11.     <main>
  12.  
  13.             <style >
  14.                 .map img {
  15.                     width: 100%;
  16.                     height: auto;
  17.                 }
  18.                 /* .img{
  19.                     max-width: 100%;
  20.                     height: auto;
  21.                     max-height: fit-content;
  22.                     max-width: fit-content;
  23.                 } */
  24.                 /* .wrapper {
  25.                     display: flex;
  26.                     align-items: center;
  27.                     width: 100%;
  28.                     height: auto;
  29.                     justify-content: center;
  30.                     position: relative;
  31.                 } */
  32.                 .map {
  33.                     display: flex;
  34.                     align-items: center;
  35.                     width: 100%;
  36.                     height: 80%;
  37.                     justify-content: center;
  38.                     position: relative;
  39.                     /* pointer-events: all; */
  40.                 }
  41.                 .map svg {
  42.                     position: absolute;
  43.                     top: 0;
  44.                     left: 0;
  45.                     width: 100%;
  46.                     /* max-width: fit-content; */
  47.                     height: 100%;
  48.                 }
  49.  
  50.                 .map__wrapper{
  51.                     position: relative;
  52.                     max-width: 100vh;
  53.                 }
  54.                 .map svg path {
  55.                     fill: none; /* Убираем обводку */
  56.                     pointer-events: all; /* Разрешаем быть целью событий мыши */
  57.                     cursor: pointer; /* Меняем курсор при наведении */
  58.                 }
  59.                 .map svg path:hover {
  60.                     animation: hoverElement 2s linear infinite; /* При наведении включаем анимацию */
  61.                 }
  62.                 /* .map__wrapper svg{
  63.                     position: absolute;
  64.                     top: -0.48px;
  65.                     left: 0;
  66.                     width: 100%;
  67.                     height: 100%;
  68.                 } */
  69.  
  70.                 .location_pop{
  71.                     fill:none;
  72.                     stroke: black;
  73.                     stroke-width: 10px;
  74.                     cursor: pointer;
  75.                     pointer-events: all;
  76.                 }
  77.                 .location_pop:hover{
  78.                     animation: hoverElement 3s linear infinite;
  79.                 }
  80.                
  81.                 .info__bg {
  82.                     position: fixed;
  83.                     max-width: 80%;
  84.                     display: flex;
  85.                     top: 2%;
  86.                     left: 30vh;
  87.                     width: 50%;
  88.                     height: 50vh;
  89.                     /* background: rgba(51, 255, 65, 0.5); */
  90.                     opacity: 0;
  91.                     transition: 0.3s all;
  92.                     pointer-events: none;
  93.                     z-index: 10;
  94.                 }
  95.                 .info__bg.active {
  96.                     pointer-events: all;
  97.                     opacity: 1;
  98.                     transition: 0.3s all;
  99.                 }
  100.                 .info {
  101.                     position: relative;
  102.                     top: 50%;
  103.                     left: 50%;
  104.                     transform: translate(-50%, -50%);
  105.                     background: #fff;
  106.                     border-radius: 20px;
  107.                     padding: 25px;
  108.                     width: 500px;
  109.                     /* display: none; */
  110.                 }
  111.                 .tooltip{
  112.                     border-radius: 5px;
  113.                     padding: 5px;
  114.                     font-weight: 500;
  115.                     background: #fff;
  116.                     color: #000;
  117.                     font-size: 14px;
  118.                     position: absolute;
  119.                     display: none;
  120.                 }
  121.                 @keyframes hoverElement { /* Сама анимация */
  122.                     0% {
  123.                         stroke: #000000;
  124.                     }
  125.                     50% {
  126.                         stroke: #fc0000;
  127.                     }
  128.                     100% {
  129.                         stroke: #000000;
  130.                     }
  131.                 }
  132.                 /* .data-photo{
  133.                     width:1%;
  134.                     height: 20%;
  135.                 }
  136.                 .path{
  137.                     max-width: fit-content;
  138.                     width: 20%;
  139.                 } */
  140.             </style>
  141.             <div class="wrapper">
  142.                 <div class="map">
  143.                 <img src="https://sun9-78.userapi.com/impg/BiCxGZndFnOXKkIkxO9Js5NhxgYmBsR8US6UMg/giscX1x6mZI.jpg?size=2560x1707&quality=95&sign=4847ce87950d8a0866896b82d6ea9acb&type=album" >
  144.                 <svg viewbox="0 0 2640 1760">
  145.                     <path data-title="13"class="location_pop" d="m 504.32487,663.46844 a 28.773148,28.773148 0 0 1 -28.77314,28.77315 28.773148,28.773148 0 0 1 -28.77315,-28.77315 28.773148,28.773148 0 0 1 28.77315,-28.77314 28.773148,28.773148 0 0 1 28.77314,28.77314 z"/>
  146.                     <path data-title="12" class="location_pop" d="m 748.85139,558.17064 a 28.773148,28.773148 0 0 1 -28.77314,28.77315 28.773148,28.773148 0 0 1 -28.77315,-28.77315 28.773148,28.773148 0 0 1 28.77315,-28.77314 28.773148,28.773148 0 0 1 28.77314,28.77314 z"/>
  147.                     <path data-title="11" class="location_pop" d="m 1138.9583,573.42592 a 28.773148,28.773148 0 0 1 -28.7731,28.77315 28.773148,28.773148 0 0 1 -28.7732,-28.77315 28.773148,28.773148 0 0 1 28.7732,-28.77314 28.773148,28.773148 0 0 1 28.7731,28.77314 z"/>
  148.                     <path data-title="Собственный пирс" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim quis ipsum sed porta. Suspendisse metus ante, pretium ut accumsan sed, rhoncus ac nisl. Proin vitae venenatis erat, sit amet ultricies tellus. Donec placerat molestie feugiat. Nunc pulvinar orci sed erat rhoncus, quis rutrum eros fringilla. Aenean vel pellentesque ipsum. Sed auctor lectus consectetur, sodales massa vitae, fringilla quam. Mauris vel nulla auctor, suscipit odio sit amet, consectetur metus. Mauris luctus rutrum imperdiet. Sed molestie et nisl a interdum. Nam nec porta ligula. Phasellus in nulla maximus, ullamcorper odio at, posuere nisl. Aliquam lacinia ipsum in diam feugiat, sit amet tempor justo laoreet. Nullam sollicitudin leo sit amet risus condimentum mattis. Curabitur neque erat, vulputate quis turpis nec, pulvinar molestie mauris." data-photo="https://sun9-73.userapi.com/impg/ISQjVHwwgM0BPtscZP6l9mq1owGEaL0CCR5IWw/PD6qXHxDkfw.jpg?size=1080x1080&quality=95&sign=c0abb82fb112fceb16cacc692f88d622&type=album" class="location_pop" d="m 820.16203,397.22221 a 28.773148,28.773148 0 0 1 -28.77314,28.77315 28.773148,28.773148 0 0 1 -28.77315,-28.77315 28.773148,28.773148 0 0 1 28.77315,-28.77314 28.773148,28.773148 0 0 1 28.77314,28.77314 z"/>
  149.                     <path data-title="8" class="location_pop" d="m 1198.0324,467.49999 a 28.773148,28.773148 0 0 1 -28.7731,28.77315 28.773148,28.773148 0 0 1 -28.7732,-28.77315 28.773148,28.773148 0 0 1 28.7732,-28.77314 28.773148,28.773148 0 0 1 28.7731,28.77314 z"/>
  150.                     <path data-title="7" class="location_pop" d="m 1226.5509,347.31481 a 28.773148,28.773148 0 0 1 -28.7731,28.77315 28.773148,28.773148 0 0 1 -28.7732,-28.77315 28.773148,28.773148 0 0 1 28.7732,-28.77314 28.773148,28.773148 0 0 1 28.7731,28.77314 z"/>
  151.                     <path data-title="6" class="location_pop" d="m 1489.3288,314.72222 a 28.773148,28.773148 0 0 1 -28.7731,28.77315 28.773148,28.773148 0 0 1 -28.7732,-28.77315 28.773148,28.773148 0 0 1 28.7732,-28.77314 28.773148,28.773148 0 0 1 28.7731,28.77314 z"/>
  152.                     <path data-title="5" class="location_pop" d="m 2200.2547,545.92592 a 28.773148,28.773148 0 0 1 -28.7731,28.77315 28.773148,28.773148 0 0 1 -28.7732,-28.77315 28.773148,28.773148 0 0 1 28.7732,-28.77314 28.773148,28.773148 0 0 1 28.7731,28.77314 z"/>
  153.                     <path data-title="4" class="location_pop" d="M 1724.6065,550 A 28.773148,28.773148 0 0 1 1695.8334,578.77315 28.773148,28.773148 0 0 1 1667.0602,550 28.773148,28.773148 0 0 1 1695.8334,521.22686 28.773148,28.773148 0 0 1 1724.6065,550 Z"/>
  154.                     <path data-title="3" class="location_pop" d="m 1230.625,731.29629 a 28.773148,28.773148 0 0 1 -28.7731,28.77315 28.773148,28.773148 0 0 1 -28.7732,-28.77315 28.773148,28.773148 0 0 1 28.7732,-28.77314 28.773148,28.773148 0 0 1 28.7731,28.77314 z"/>
  155.                     <path data-title="2" class="location_pop" d="m 2418.2176,860.64814 a 28.773148,28.773148 0 0 1 -28.7731,28.77315 28.773148,28.773148 0 0 1 -28.7732,-28.77315 28.773148,28.773148 0 0 1 28.7732,-28.77314 28.773148,28.773148 0 0 1 28.7731,28.77314 z"/>
  156.                     <path data-title="1" class="location_pop" d="m 1715.4398,787.31481 a 28.773148,28.773148 0 0 1 -28.7731,28.77315 28.773148,28.773148 0 0 1 -28.7732,-28.77315 28.773148,28.773148 0 0 1 28.7732,-28.77314 28.773148,28.773148 0 0 1 28.7731,28.77314 z"/>
  157.  
  158.                 </svg>
  159.             </div>
  160.  
  161.                
  162.             </div>
  163.             <div class="info__bg">
  164.                 <div class="info">
  165.  
  166.                     <img class = "info__photo"src="" alt="designed by eg0rmaffin" class="info__photo">
  167.                     <h2 class = "info__title">
  168.  
  169.                     </h2>
  170.                     <p class="info__text">
  171.  
  172.                     </p>
  173.  
  174.  
  175.                 </div>
  176.             </div>
  177.                        
  178.             <div class="tooltip">
  179.                
  180.             </div>
  181.  
  182.  
  183.            
  184.  
  185.     </main>
  186.     <script>
  187.         const tooltip = document.querySelector('.tooltip');
  188.         const location_pop = document.querySelectorAll('.location_pop');
  189.         const popupBg = document.querySelector('.info__bg');
  190.         const popup = document.querySelector(".info")
  191.         const popup__photo = document.querySelector('.info__photo');
  192.         const popup__title = document.querySelector('.info__title');
  193.         const popup__text = document.querySelector('.info__text');
  194.  
  195.         location_pop.forEach((item) => {
  196.             item.addEventListener('click', function() {
  197.  
  198.                 popup__title.textContent = this.getAttribute('data-title');
  199.                 popup__photo.setAttribute('src', this.getAttribute('data-photo'));
  200.                 popup__photo.style.display = 'flex';
  201.                 popup__photo.style.width="70vh";
  202.                 popup__photo.style.height="70vh";
  203.                 popup__text.textContent = this.getAttribute('data-text');
  204.                 popupBg.classList.add('active');
  205.             });
  206.  
  207.             item.addEventListener('mouseenter', function() {
  208.                 tooltip.textContent = item.getAttribute('data-title');
  209.                 tooltip.style.display = 'block';
  210.             });
  211.  
  212.             item.addEventListener('mouseleave', function() {
  213.                 tooltip.textContent = item.getAttribute('data-title');
  214.                 tooltip.style.display = 'none';
  215.             });
  216.  
  217.             item.addEventListener('mousemove', function(e) {
  218.                 tooltip.style.top = (e.y + 20) + 'px';
  219.                 tooltip.style.left = (e.x + 20) + 'px';
  220.             });
  221.         });
  222.  
  223.         document.addEventListener('click', (e) => {
  224.             if(e.target === popupBg) {
  225.                 popupBg.classList.remove('active');
  226.             }
  227.         });
  228.  
  229.  
  230.     </script>
  231.   </body>
  232. </html>
  233.  
  234.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!