Tommi
Проверенные
- Сообщения
- 234
- Решения
- 2
- Реакции
- 65
- Баллы
- 3,325
Создал HTML страницу. Теперь на странице на весь экран X твиттера, если отключить кнопку: "Поделиться в X (Twitter)", X пропадает.
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Карта</title>
<meta name="description" content="">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="dl-carta/css/main.css">
<link rel="stylesheet" href="dl-carta/css/media.css">
<link rel="stylesheet" href="dl-carta/css/fonts.css">
<link rel="icon" type="dl-carta/image/x-icon" href="/dl-carta/images/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="map">
<svg viewBox="0 0 821 853">
<a href="#">
<path class="part" d="m 402.26773,106.81793 c 0.78516,1.07307 1.38259,2.25295 2.63452,3.20933 l 1.53281,0.57481 2.25132,0.1916 2.15552,-0.57481 c 1.00969,-1.1928 4.45256,-5.83833 4.83794,-7.28086 l 3.01773,-4.742139 c 0.64327,-2.411741 0.88589,-6.14728 0.3832,-8.813678 -0.61457,-1.437013 -1.63841,-3.017726 -3.01772,-4.454739 l -2.68243,-1.963917 c -1.3732,-0.494971 -2.07747,-0.989942 -4.35894,-1.484913 -0.92362,0.09335 -2.32237,-0.0088 -3.49673,0.335303 -1.09632,0.0025 -2.61335,0.741334 -4.21523,1.628614 l -2.39502,2.20342 c -1.61715,1.968423 -1.89808,2.50482 -2.58662,3.544631 -0.50427,1.09408 -0.65052,2.036933 -0.67061,3.736232 0.0915,2.444147 0.35307,3.537425 0.81431,4.50264 2.1567,3.395536 1.93121,3.802536 3.01772,5.652246 m -12.45411,-9.244778 c 0.2399,-2.917252 1.06963,-5.241718 2.20342,-7.90357 0.97967,-2.074099 1.83655,-3.793205 3.44883,-4.981643 1.98985,-2.165346 3.64572,-3.959444 5.50856,-4.981643 1.69252,-1.082487 4.42565,-1.819414 6.75394,-2.011819 2.2536,-0.573654 5.36386,-0.218291 7.13718,-0.1916 2.07568,0.484851 3.72026,1.672174 5.79595,2.921925 3.89362,2.689104 5.19155,4.875954 7.32875,9.244781 2.91163,5.869007 1.82699,4.900596 2.53872,7.280864 l 0.479,5.029544 h -6.13124 c -0.79729,-4.345186 -1.60257,-8.918255 -3.01772,-11.256598 -2.24805,-3.272825 -3.67198,-3.957799 -5.36485,-5.125346 -1.92997,-0.909794 -4.20149,-1.373217 -6.89766,-1.389111 -2.56784,0.216958 -4.20492,0.995102 -6.03546,1.580714 -1.94638,1.476799 -3.28976,2.280255 -4.98164,5.029544 -0.7927,1.526246 -1.59639,2.874516 -1.91603,5.74805 l -1.19751,5.556448 h -5.65224" fill="#bf2523" description-data="<img src='dl-carta/media/1.jpg'>
Стражи базы
<br>
Два стража охраняют проход к базе">
</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='dl-carta/media/2.jpg'> Тестовое сообщение.">
</a>
</svg>
<div class="description">
</div>
<img src="dl-carta/media/map.png" alt="">
</div>
<!--[if lt IE 9]>
<script src="dl-carta/libs/html5shiv/es5-shim.min.js"></script>
<script src="dl-carta/libs/html5shiv/html5shiv.min.js"></script>
<script src="dl-carta/libs/html5shiv/html5shiv-printshiv.min.js"></script>
<script src="dl-carta/libs/respond/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="dl-carta/js/main.js"></script>
</body>
</html>
CSS:
body {margin: 0; padding: 0;}
.map {
position: relative;
transform: scale(0.5);
text-align: center;
}
svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.part {
opacity: .0;
}
.part:hover {
transition: opacity .2s ease;
opacity: .9;
cursor: pointer;
}
.description {
display: none;
position: absolute;
padding: 20px;
border-radius: 20px;
box-sizing: border-box;
width: 300px;
height: 400px;
background-color: #212529;
color: whitesmoke;
box-shadow: 0 0 32px 10px #ccc;
left: 100px;
bottom: calc(50% - 200px);
font-family: sans-serif;
}
.description img {
width: 250px;
margin-bottom: 20px;
}
Последнее редактирование:
