My webpage has a large image (a map). I want to position, at the top right of the image, a small icon that is for closing the map.
How can I figure out the position and place the image appropriately?
The image has a fixed width of 900 x 600.
I have jquery on the page if that helps.
I tried using $("#map").position and I have the top and left, but not sure how to position to the top right.
The easiest way would just to positon the close button absolutely with CSS instead of calculating the positon with JS. For example:
<div id="map" style="position: relative;">
<img src="yourmap.png">
<img src="close.png" style="position: absolute; top: 0; right: 0;">
</div>
You could also take a look at the latest jQuery-UI bits. They have some facilities for positioning elements relative to other elements on the page. Depending on what browsers your wanting to support this could be simpler than creating the browser-agnostic CSS.