SVG карта изображений, масштабирование

dimpase · June 20, 2019

Приветствую!

Нужно реализовать кликабельную карту изображения, наткнулся на урок в интернете, но при уменьшении окна браузера области сбиваются. Помогите пожалуйста.

<!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);
	}
)

Sign In

SVG карта изображений, масштабирование

Question

dimpase

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information