<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta content="noindex, nofollow" name="robots">
<meta content="noindex, nofollow" name="googlebot">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.1.min.js" type="text/javascript"></script>
<link href="http://jvectormap.com/css/jquery-jvectormap-2.0.1.css" type="text/css" rel="stylesheet">
<script src="http://jvectormap.com/js/jquery-jvectormap-ru-merc.js" type="text/javascript"></script>
<script src="http://russellbits.com/labs/jvectormap-with-lines/assets/scripts/svg.js" type="text/javascript"></script>
<script src="http://russellbits.com/labs/jvectormap-with-lines/assets/scripts/svg.path.js" type="text/javascript"></script>
<style type="text/css">
@font-face {
font-family: "BebasNeue_Bold";
src: url("fonts/BebasNeue_Bold.otf");
}
body {
background: url("img/bg.png") repeat scroll 0 0;
margin: 0;
padding: 0;
font-family: "BebasNeue_Bold";
position:relative;
}
#map {
width: 100%;
height: auto;
}
#text {
border: 1px solid red;
height: 315px;
position: absolute;
right: 0;
top: 0;
width: 560px;
max-width:80%;
margin:auto;
bottom:0;
left:0;
background-color: #fff;
display: none;
z-index:10;
padding: 25px;
}
.title {
text-align: center;
position:relative;
}
.title h2{
color: #006bb9;
font-size: 60px;
display: inline-block;
vertical-align: middle;
}
.title img {
margin: 0 20px;
vertical-align: middle;
}
.title span {
display: inline-block;
position: relative;
width: 120px;
}
.title span img {
left: -70px;
position: absolute;
top: -110px;
}
.jvectormap-region.jvectormap-element {
text-decoration: underline;
}
#mapContainer {
position: relative;
width: 100%;
height: auto;
}
#svgMapOverlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 200;
}
line {
stroke:rgb(0,0,0);
stroke-width:3;
}
div#dark-bg {
background: rgba(0, 0, 0, 0.5);
display: none;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index:9;
}
a.close {
color: red;
position: absolute;
right: 10px;
text-align: center;
text-decoration: none;
top: 10px;
}
iframe {
max-width: 100%;
}
@media all and (max-width: 1000px) {
.title > img {
margin: 0 10px;
width: 45px;
}
.title h2 {
font-size: 20px;
}
.title span {
width: 50px;
}
.title span img {
left: -10px;
margin: 0;
top: -40px;
width: 86px;
}
}
</style>
<title>Будущему генералу 30</title>
<script type="text/javascript">
$(window).load(function(){
var markers = [
{ latLng: [48.6700797, 44.2265277], name: "название РЕгиона - Видео1", text: "https://www.youtube.com/embed/AsbJhoJywa8" },
{ latLng: [50, 44.7997967], name: "название РЕгиона - Видео2", text: "https://www.youtube.com/embed/IsUg_vbq-gU" },
{ latLng: [49, 45], name: "название РЕгиона - Видео3", text: "https://www.youtube.com/embed/Unli8AmVvJg" },
{ latLng: [50, 43], name: "название РЕгиона - Видео4", text: "https://www.youtube.com/embed/obWfmsolXwE" },
{ latLng: [51, 42], name: "название РЕгиона - Видео5", text: "https://www.youtube.com/embed/alUcdwrey1c" },
];
var RColor = '#0064be';
var RColor2 = '#fedf00',
activeRegions = {
"RU-VGG" : RColor,
/*"RU-KYA" : RColor,*/
};
activeRegions2 = {
"RU-VGG" : RColor2,
/* "RU-KYA" : RColor2,*/
};
$('a.close').on('click', function(e){
e.preventDefault();
$('#text').hide();
$('#dark-bg').hide();
});
$('#map').vectorMap({
map: "ru_merc",
backgroundColor: "transparent",
markerStyle: {
initial: {
image: "gif/marker.gif",
}
},
regionLabelStyle: {
initial: {
'font-weight': 'normal',
'text-align': 'left',
'font-size': '32px',
fill: '#050505',
'font-family': 'BebasNeue_Bold',
'position': 'relative',
},
hover: {
fill: 'red'
}
},
labels: {
regions: {
render: function(code){
var doShow = ['RU-VGG'];
var Countries = ['Родимая сторона']
var index = doShow.indexOf(code);
if ( index> -1) {
return Countries[index];
}
}
}
},
markers: markers,
onMarkerClick: function (e, index) {
$('#text').show();
$('#text > div iframe').attr('src', markers[index].text);
$('#dark-bg').show();
},
regionsSelectable: true,
regionsSelectableOne: true,
regionStyle: {
initial: {
fill: "#278dce",
"stroke-width": 3,
},
selected: {
fill: "#0b65b1",
stroke: "#0b65b1",
"stroke-width": 0,
"stroke-opacity": 1
}
},
series: {
regions: [{
values: activeRegions,
attribute: 'fill'
},
{
values: activeRegions2,
attribute: 'stroke',
}]
},
});
/*$('text.jvectormap-region.jvectormap-element').each(function() {
console.log($(this).attr("y"));
$(this).attr("y",function(n, v){
return v -= v/100*50;
});*/
});
</script>
</head>
<body>
<div class="title"><img src="gif/star1.gif" /><h2>Будущему генералу</h2><span><img src="gif/30.gif" /></span><img src="gif/star1.gif" /></div>
<div id="mapContainer">
<div id="map"></div>
</div>
<div id="text"><div><iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe></div><a href="#" class="close">X</a></div>
<div id="dark-bg"></div>
</body>
</html>
