HTML/CSS/JS Elements positioning

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 100x100, 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

Answers


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


Need Your Help

retrieving data from a multidimentional array in php

php multidimensional-array

I have here an array which is dynamic. The targetCourse array contains stepNumber, stepTitle, description &amp; courseId. The courseId is again dynamic and contains id, coursePrice &amp; courseImage

How to upgrade Jquery to jquery1.4 in asp.net mvc

jquery jquery-ui

I need to update jquery1.3.2 to jquery1.4 (in Asp.net MVC).