There is a div.mapCollectives block with position:relative and a nested list of ul.collectives>li .

 <div class="mapCollectives"> <img src="img/map.png" alt=""> <ul class="collectives"> <li> <a href="#" class="decorItemText"> <p>Декоративно-прикладное творчество</p> </a> </li> <li> <a href="#" class="decorItemText"> <p>Этнографический фольклорный</p> </a> </li> </ul> </div>

Each li is given position:absolute . Through JS , when the browser window is resized, each li assigned a new transform:scale

 $(window).resize(function(){ var ww = $('.mapCollectives').width()*0.0008630;//Специальные коэффициенты var hh = $('.mapCollectives').height()*0.0014545;//для расчёта пропорций li $('.collectives li').css({ 'transform': 'scale('+ww+', '+hh+')' }); });

The problem is that li set in the left and top styles, and when the window is reduced, these values ​​must also be changed in order for li maintain its location ( .mapCollectives>img is a map with islands, and li is pointers to specific islands).

The .mapCollectives block .mapCollectives - the picture inside decreases. Pointers are decreasing (should point to the "correct" islands, that is, left and top should decrease).

I tried to set the left and top in percent, but did not help. Tried transform(ww*N, hh*M) , did not help either. I think there should be some tricky formula for calculating the coordinates of li depending on the size of the parent window.

All essence in two screens:

Pointer points to a specific coordinate enter image description here

Change the screen size and the pointer moves.

enter image description here

The dimensions of the pointer itself change in proportion to the screen, but the block itself slides down and to the right, and it is necessary that it points to the same island as on the first screen.

Update

http://codepen.io/anon/pen/EPmdvO

 $(document).ready(function() { $(window).resize(function() { var ww = $('.mapCollectives').width() * 0.0008630; var hh = $('.mapCollectives').height() * 0.0014545; console.log(ww); console.log(hh); sscale = $('.mapCollectives').width() / 1976; $('.collectives li').css({ 'transform': 'scale(' + ww + ', ' + hh + ')', 'top': ((212 - (300 * sscale)) * -5) / 8, 'left': ((95 - (220 * sscale)) * -1) / 0.7 }); }); $(window).resize(); }); 
 main.container img { padding: 0; } .mapCollectives { max-width: 100%; max-height: 100%; position: relative; } .container img { max-width: 100%; } .collectives li { outline: 1px solid; width: 221px; text-align: center; height: 253px; position: absolute; } .collectives li:first-child { background: url(http://5.firepic.org/5/images/2016-01/09/5p09s5ue4l0w.png) no-repeat center 8px, url(http://5.firepic.org/5/images/2016-01/09/zxmx6oq31mqu.png) no-repeat center; left: 55px; top: -19px; } .decorItemText { position: relative; height: 100%; display: block; } .decorItemText p { position: absolute; bottom: 9px; font: bold 15px/16px RobotoCondensed; color: #FFF; } @media (min-width: 1770px) { .col-lg-8 { width: 65.8%; } } @media (min-width: 1430px) { main.container { width: 67.2%; } } @media (max-width: 1200px) { main.container { padding: 0px 14px; width: 100%; } } } @media (min-width: 1200px) { .col-lg-8 { width: 59.2%; } } } @media (min-width: 992px) and (max-width: 1200px) { .col-md-9 { width:75% !important; } } 
 <main class="container col-lg-8 col-md-9 col-sm-12"> <div class="mapCollectives"> <img src="http://5.firepic.org/5/images/2016-01/09/2owys8ofkcby.png" alt=""> <ul class="collectives"> <li> <a href="#" class="decorItemText"> <p>Декоративно-прикладное творчество </p> </a> </li> </ul> </div> </main>

  • Make a pl. sandbox (here / jsfiddle / jsbin / codepen) - olegatro
  • I'm still doing an example, but I had a problem with very small resolutions, so I would like to clarify how much the map will decrease? If it were not for the text under the marker, one could do without scale at all, or make the text as an image. - olegatro

2 answers 2

Problem solved!

There is a magic formula for calculating top and left

 $('.collectives > li:first-child').css({ 'top': ((205-(300*sscale))*-5)/8, 'left': ((80-(210*sscale))*-1)/0.73 }); $('.collectives > li:nth-child(2)').css({ 'top': ((205-(500*sscale))*-5)/8, 'left': ((80-(395*sscale))*-1)/0.73 }); $('.collectives > li:nth-child(3)').css({ 'top': ((205-(300*sscale))*-5)/8, 'left': ((80-(780*sscale))*-1)/0.73 }); $('.collectives > li:nth-child(4)').css({ 'top': ((205-(470*sscale))*-5)/8, 'left': ((80-(1260*sscale))*-1)/0.73 }); $('.collectives > li:nth-child(5)').css({ 'top': ((205-(1200*sscale))*-5)/8, 'left': ((80-(270*sscale))*-1)/0.73 }); $('.collectives > li:nth-child(6)').css({ 'top': ((205-(950*sscale))*-5)/8, 'left': ((80-(620*sscale))*-1)/0.73 }); $('.collectives > li:nth-child(7)').css({ 'top': ((205-(1210*sscale))*-5)/8, 'left': ((80-(910*sscale))*-1)/0.73 }); $('.collectives > li:nth-child(8)').css({ 'top': ((205-(1200*sscale))*-5)/8, 'left': ((80-(1215*sscale))*-1)/0.73 });

1215 in the latter case is responsible for the displacement of the element, -1, 80 and 0.73 - for resizing when resizing the element. I picked up the coefficients manually, so honestly I don’t understand how this formula works

  • It is cruel of course, but the task itself is not simple, without crutches it is not enough. - olegatro

you can initially calculate for each li top and left as a percentage, write these percentages as attributes in li:

 <li attrtop="12%" attrleft="10%">

and when resizing, take for each li:

 $("li").each(function(){ var top = $(this).attr("attrtop"); var top = $(this).attr("attrleft"); $(this).css("top",top+"%"); $(this).css("left",left+"%"); });