I'm using a background image in the BODY section of the HTML. The CSS settings for the BODY are:
The parent element CONTAINER has its position set to absolute. In this way, the background image scales (mostly well) as the browser window scales.
I'd like to taget items in that background image to act as the navigation links for the site. i.e. a camera or a keyboard. As the background image scales, the relative position of the link has to move and scale as well.
I can get some of the scaling to work properly in Live Design mode in CS6, but none of it works when I view it in Safari, Firefox, or Chrome.
If you MUST have a scalable background image, use the method described below.
Use real navigation (CSS styled text links) because images or background images can neither be translated, searched, indexed by engines nor picked up by screen readers.
When you attempt to apply a link to a region on a scalable background or image map, the anchor coordinates won't re-scale with the image. As such your hotspots would never line up with your background. In short, this is a bad design idea.
Thanks Nancy. Your code accomplishs the same thing with respect to the scaling of the background image that I achieved with the code above. Positioning and scaling the links is still the hurdle. I don't think it's a bad design idea, however, I realize there's no easy way to position the links relative to the background image coordinates in a way that allows the links to move in convert wtih the iamge and scale as well. It seems to be more trouble than it's worth, and apparently people have been looking for similar solutions for several years.
There are better ways to put stylish navigation on your site without layering it over a complex background image. Project Seven's Pop-Menu Magic is one commercial solution that works in all web devices.
Europe, Middle East and Africa