Question

I was trying to create an image map tool as part of my project
http://jsfiddle.net/MBThE/12/

Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/

I tried to place the links as divs and positioning using css..
But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as
position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up….So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?

I consider another alternative as HTML5 canvas….But that results in unwanted resizing of image…
So is there any way to make the divs does not affect each other but also place them inside the container div?

Note:- click ‘add hot spot’ button and click on the image to add hotspot..hover the hotspot to edit the hotspot

Answer 1

Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.

<div style="position:relative" id="parentDiv">
     <div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
     <div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>

hope that helps