0

I tried several other codes mentioned here on stackoverflow, all work in specific positions and specific distances. I tried to use the MAP> AREA tag, but the plugins found can not keep resizing, leaving the point completely out of the picture.

Need to position an element over an image in a specific point. Other words, the image will reduce when I resize the browser and the point must be kept exactly where he is.

Look at the example of three images:
1 - Image FULL and point in the correct place;
2 - Medium image. Here has begun to lose;
3 - Not much smaller image. Here now very out;

I am currently using this code: 

$('.btParede').css("top", ( $('.imageBox').offset().top + 200 ) + "px"); 
$('.btParede').css("left", ( $('.imageBox').offset().left + $('.imageBox').width() - 400 ) + "px");

There is a more specific position relative to another element when it is resized without losing the specific point?

Thanks

**** I forgot to mentioned this ****

I use "fitToParent" jQuery resize to aspect ratio to scale and reload and maintain aspect ratio of the image inside the document

Here is another example http://jsfiddle.net/Tyriar/ypb5P/1/ that works fine when resize, but when reload, mess it up.. Anyone experienced this? Works one way and not another?

Thanks again!

Community
  • 1
  • 1
Daniel Arantes Loverde
  • 2,317
  • 2
  • 28
  • 41
  • 1
    First of all why dont you just do this in your CSS? Second you should be using percentages there is no way to make this work with pixels and have a re-sizing image unless you can figure out the exact ratios for the X and Y of where you overlay image should be. Try playing around with top: x% and left: x% – GifCo Aug 28 '14 at 14:51
  • Sorry i shouldn't say impossible. You could do it with media queries and set you overlay image exactly where you want it for multiple different background sizes. This may not be a good solution though as then you would have to have specific breakpoints where the BG image changes size instead of just re sizing fluidly. – GifCo Aug 28 '14 at 14:54
  • tried using CSS and also with percentage still falls outside the specific point and when smaller, the worse it gets. If reloading the page, it gets worse – Daniel Arantes Loverde Aug 28 '14 at 14:59
  • It will definitely take a lot of trial and error if you can recreate in a fiddle or codepen I will try and take a look. – GifCo Aug 28 '14 at 15:02
  • See this almost perfect example http://jsfiddle.net/Tyriar/ypb5P/1/ work nice when resize, but when reload... mess it up.. i forget to mentioned that i use "fitToParent" http://stackoverflow.com/questions/1682495/jquery-resize-to-aspect-ratio#1682739 to scale and reload and maintain aspect ratio of the image inside the document – Daniel Arantes Loverde Aug 28 '14 at 15:25
  • hmmm it works fine for me in Chrome. Even when i re-size and then reload the page. – GifCo Aug 28 '14 at 15:37
  • You have add the fitToParent on this jsfiddle ? – Daniel Arantes Loverde Aug 28 '14 at 15:38
  • No i just opened the fiddle you posted in your last comment. – GifCo Aug 28 '14 at 15:40
  • That was what I meant above your "chrome" comment, in MY code – Daniel Arantes Loverde Aug 28 '14 at 15:44

0 Answers0