dimpase
-
Posts
2 -
Joined
-
Last visited
dimpase's Achievements
Explorer (1/14)
0
Reputation
-
Здравствуйте! подскажите и-за чего это может быть? -webkit-text-size-adjust: 100%; --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; text-rendering: optimizeLegibility !important; -webkit-tap-highlight-color: transparent; text-align: center!important; color: #007bff!important; font-family: 'Material Icons'; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-size: 3rem; font-weight: 100; box-sizing: border-box; background-color: #fff!important;
-
Приветствую! Нужно реализовать кликабельную карту изображения, наткнулся на урок в интернете, но при уменьшении окна браузера области сбиваются. Помогите пожалуйста. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Интерактивная карта</title> <meta name="description" content=""> <meta name="keywords" content=" "> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/fonts.css"> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> <div class="map"> <svg viewBox="0 0 1140 800"> <a href="#"> <path class="part" d="m 457.22244,98.885648 c 32.52252,66.957192 38.73863,153.400622 28.16442,252.281322 l 137.22665,-5.39319 c 5.33727,-80.01803 6.81847,-159.82184 -44.34398,-236.701 z" fill="#bf2523" description-data="<img src='media/2.jpg'> Реберная часть (толстый край) — первосортное мясо, в цельном виде состоит из 13 ребер"> </a> <a href="#"> <path class="part" d="m 578.26953,109.07278 c 44.33189,69.33986 54.25203,149.81293 44.34398,236.701 l 152.80698,-0.59924 C 772.7733,261.24635 769.87608,177.39629 717.29391,109.07278 Z" fill="#bf2523" description-data="<img src='media/1.jpg'> Филей (поясничная часть, тонкий край). Этот отруб содержит нежное и очень постное мясо."> </a> </svg> <div class="description"> </div> <img src="media/cow.jpg" alt=""> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html> body {margin: 0; padding: 0;} .map { position: relative; text-align: center; } svg { position: fixed; top: 0; left: 0; height: 100%; width: 100%; } .part { opacity: .3; } .part:hover { transition: opacity .2s ease; opacity: .5; cursor: pointer; } .description { display: none; position: absolute; padding: 20px; box-sizing: border-box; width: 300px; height: 400px; box-shadow: 0 0 32px 10px #ccc; left: 50px; bottom: calc(50% - 200px); font-family: sans-serif; } .description img { width: 250px; margin-bottom: 20px; } $('.part').hover ( function() { $('.description').html($(this).attr('description-data')); $('.description').fadeIn(); }, function() { $('.description').fadeOut(50); } )
