Create a <div> overlay that stays in position after being scaled using only HTML-CSS
I am working on a site that will have an image gallery. The designer's idea was to make buttons that often switch photos over photos.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
I currently made a javascript solution for this - it gets the position of the photo and applies absolute positioning to the div buttons. There are some disadvantages - it is unstable in Opera and IE. Also I had to do a dirty haxx to keep it in position after scaling. I wonder if there is a better way to do this, preferably without javascript.
a source to share
do you mean here ? (Dutch website, see photo browser in the center column above)
browser scaling works great in browsers like firefox and safari because they magnify all content and adjust pixel values. To make scaling work like (6) you will need to style everything in em. But browser scaling is cheesy for pixel data anyway ...
Absolute positioning of buttons (left and right 0) is not a problem as long as the container element is positioned relatively.
a source to share
If you understand correctly, you are trying to center these arrow buttons vertically relative to the image. This is fairly easy to accomplish with CSS (no javascript needed). Here's an example .
The basic idea is that you are using a pair of divs plus some absolute / relative positioning. There's an outer div that pushes the top of the whole object to the center of the parent element, and then an inner div that pulls up your content so that the content is centered rather than the top of the element.
a source to share
A popular technique is to split the entire image into two huge (mostly transparent) links. The left half of the photo will take you to the previous image, the right to the next.
Surely you position the button images correctly and they will move, but I guess the problem you find is keeping the mouse moving to go through the many images as the buttons move. this idea, you only need to keep your mouse close to the middle and it should stay above the photo (and therefore the direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Hover your mouse over the image and you will see it activates the full path. Not exactly the same as your implementation, but I'm sure, but the concept applies.
a source to share