Question

have a problem. At first look at this HTML

<div id="map" style="background-image: url(map.png); width: 700; height: 600;">
  <div id="dot1" onMouseOver=expand(this) onMouseOut=shrink(this)></div>
  <div id="dot2" onMouseOver=expand(this) onMouseOut=shrink(this)></div>
</div>

and I have next JS code

function expand(element) {
  element.style.height = '100px';
}
function shrink(element) {
  element.style.height = '20px';
}

IDEA is: imagine map and multiple “red dots” on it on mouse over it’s expanding to 100×100, getting white background and text inside about this spot. Only one problem is – how to make other dots stick to the map while one of them is expanded?

For example user is looking on “top” spot, and every else under current one is moving down for ~100px (exactly amount of expanding 1st one)

It looks fine at position : relative but only while you’re not looking inside.
Absolute/fixed? – Bad option. I have to calculate user screen size / client size and place every “dot”
OR calculate MAP’s left/top offset and make every dot map_offset_Left+myLeft

Maybe there is a way to set them dependent from MAP div and be independent from each other?

Ty

Answer 1

Set the map to position: relative, its absolutely positioned descendants will then be positioned with respect to the map and not the window.