This may go right over the heads of some of you. That's fine. Basically, I'm not as supergenius as I claim and/or this problem is not solvable. Here's a picture of my old kitty taking a ride in my car so you didn't completely waste your time:
Now...
Basically I have an image like shown here:
The blue rectangle image will resize to 100% height of the screen and be centered. The aspect ratio of said image will stay the same as the height of the screen changes.
The white circles are buttons (can be divs, images, whatever the fuck i want them to be) that will lay over the image. These will be links.
Is there any way to position these buttons so they appear on the rectangle at the exact position and relative size of the blue rectangle as the monitor size changes?
A bit of backstory about the client's request before you ask why the hell I'm even trying to do this.
Basically the blue rectangle represents a photo of their product. On said product there are buttons that, on this demo, will be links. They want their end users to be able to view the product at 100% height on the computer (because it is taller than it is wide) so there are no scroll bars.
I can easily get the image to resize to 100% of the monitor height. And then the buttons to resize to the percentage of the screen. I haven't tried but I assume using absolute positioning and % margins I can position them where I need them to be, height-wise.
The problem is width. With an undefined width that is relative to the height of the monitor, I have no way to shift the buttons left or right or define their width so they lay where they are supposed to lay or be the size they are supposed to be.
If I use percentages for the width, the positioning and width will be vastly different depending on if they have a 4:3 monitor or 16:9 monitor.
The client only requests it work on computers/laptops/netbooks (their words, not mine) because the end user will be using a computer almost 100% of the time, as they will be landing on this page to print some huge but necessary long documents. The client hopes that this interactive landing page will help them become more familiar with the product and therefore use it more/buy more/etc.
Create a container that holds all of the circles (buttons) within. Then you can keep that container positioned in the middle of the screen regardless of the browser size. Then control that container and it's contents sizes with css media queries. At least that's how I'd approach it.
So basically this is what we ended up doing. First we have the body at 100% width and height. Then we have a "sticky" container with no width and 100% height. Then we have the image inside the sticky container so it stretches said container to the width of the image. The image also has 100% height. Then we have percentage margin-left or margin-right and width/heights for the buttons. They are floated left and right. They are inside the "sticky" container so they base their movements and sizes off the container which is conveniently sized to the size of the image. Since the proportions are always the same this works well. Errors encountered: 1. On IE8 the sticky container sizes to the size of the image before it is resized to the height of the screen. Basically ie8 is broken. For this I have a separate stylesheet where everything is in pixels with an 800px height of the main image. We also have flash fallback for the video now, at the client's request. 2. On mobile the width-height ratio of the image is different than the screen so the width of a 100% height image is too wide, causing side scrolling and weird placement of the invisible buttons. To combat this we added a 90% zoom for iphones/android, took away the user's ability to zoom and also added a bit of javascript to force refresh on switch from portrait to landscape on mobile or tablets.
Make the image and circles SVG? You can make the circles behave like links with a click event handler and setting cursor to pointer. Then when you scale it, you're scaling the whole assemblage. Alternately, I think CSS transformations should work with image maps.