Generate frame for picture

I creating gallery, and I want to create frame around the picture.

But this picture mus开发者_如何学JAVAt be scalable. Width and height of this frame generated by width and height of image.

And must to have possibility to change height of frame through the JavaScript.

Thanks.

PS: First of all, I must to have possibility to make frame narrow through the JavaScript.

If I was you I would make sure I can reuse (repeat) images, and then I will do it like that:

<div id="frame">
   <div id="top-left"></div>
   <div id="top"></div>
   <div id="top-right"></div>

   <div id="left"></div>
   <div id="imageSpace"></div>
   <div id="right"></div>

   <div id="bottom-left"></div>
   <div id="bottom"></div>
   <div id="bottom-right"></div>
</div>

where: #top-left, #top-right, #bottom-left, #bottom-right are using corner images as backgrounds and have both width and height set.

And #top, #right, #bottom, #left are using repeated image for their backgrounds.

Check attached image where I put lines where you should cut original frame-image.

This method will allow you to change width of #top / #bottom and #left / #right to increase the size of your frame.

This can be quite tricky to pull off.

If you are using modern browsers that support CANVAS, check out this demo that does what you are looking for: CANVAS Demo

Otherwise you will need to create 8 images (4 corners, and 4 sides) where the sides are made in such a way as they can be tiled to adjust to whatever size you need.

The next trick is how you build the frame. You could by hand create DIVs/Tables around your pictures to create this affect but that would be very bulky and not very clean. Your best bet would be to use jQuery (or your favorite lib) to hook into all images on the page with a CSS class (e.g. "fancyFrame"), and wrap them as needed with HTML markup that makes use of the images you created above via CSS.

Narrowing the frame with Javascript is the easiest part, really. Once you have your HTML/CSS set up so that it already scales you can just set the width with Javascript like this:

var photo = document.getElementById('photoFrame');
photo.width = '200px';

You can use A List Apart's Drop Shadow technique which uses CSS and PNGs to create automatically resizeable drop shadow for images. You can modify technique to create a resizeable frame.

You would need four divs and four images. The corners would need to be cut at 45 degree angles with transparency:

• Image 1 - Top-left corner and top and left sides of the frame.
• Image 2 - Top-right corner and right side of frame.
• Image 3 - Bottom-left corner and bottom of frame
• Image 4 - Bottom-right corner of frame

Funny, I had to do this exact thing when I worked at ImageKind.com. For reference, if you go to the frame shop there, such as this one, go to Step 4 (Add Mats) and click Adjust Width, there's a slider that does more or less what you're describing.

I originally had a couple of nested DIVs with big opposing L-shaped frame pieces as background images. A little Firebug inspection shows they've changed it to be a table. More efficient I'm sure, as the side pieces can tile.