Hmm, I was not using the background-image thing. In the example code I posted I put the main image in a regular img tag with normal positioning and no size information making it show up in original size and original proportions. Then I simply put in anchor elements for the links using a class that position them. Inside the anchor element I put the link icon. I also set the anchors to hidden unless hovered. This last bit turned out no to work as expected in MSIE, but works fine in Firefox. So to make the hide/appear on hover work in most browsers some additional work is needed. I am quite certain that it can be fixed without resorting to javascript, though.
/ Fredrik On 3 July 2010 02:06, Matthias Kappenberg <[email protected]> wrote: > Hi Freber, > > if I'm right a pure CSS solution will not work, > because of the image proportions. > > Have a look here: > http://www.markschenk.com/cssexp/background/index.html > > and have a look at the demo: > http://www.markschenk.com/cssexp/background/scaledbgimage.html > > on my site I'm using this: > http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html > > Matthias > > > ________________________________ > From: Mark Heuymans <[email protected]> > To: [email protected] > Sent: Sat, 3 July, 2010 7:25:48 AM > Subject: Re: cellar update > > I'll have to do some learning here, my webskills are very limited... > But the 3d part is much more work anyway. > I'm glad I finally got this far after years of postponing! The only bad > thing is that I now have so much free time to do it :( > > thanks for the tip Fredrik, > Mark H > > > >> Did you consider using CSS for positioning the buttons, as I >> suggested, rather than breaking the images apart into a table? I think >> that the absolute positioning can work with percentages as well, then >> you could use CSS to scale the images as well - they will still have >> the same download time, but would work in smaller windows. >> >> /Fredrik >> >> > >
