Custom Image Frames with Javascript (also works for divs)

In my last post Any size Image Frame with CSS I showed how to build a frame around an image using CSS. I ended the post with some issues and drawbacks. This post shows how to use a javascript implementation to overcome a lot of the drawbacks of the pure CSS version of the frames.

The Images

The first thing you’ll need are the border images as with the CSS solution. You’ll need at least two images one for the top and bottom border and one for the left and right border. Depending on the design your could use up to four different images one for each border side. Here are the two images used for the above picture. These images either need to be taller/wider then the largest image you’ll be displaying or be able to repeat and still fit together.

The Javascript

This solution requires the YUI global, dom and event objects. The easiest way to include these files is just to pull them from Yahoo’s server just add the following line of code to your page:

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

YAHOO.JP.borders.default_settings = {
    'top_border_src': '/images/pic_frame_horizontal.jpg',
    'bottom_border_src': '/images/pic_frame_horizontal.jpg',
    'left_border_src': '/images/pic_frame_vertical.jpg',
    'right_border_src': '/images/pic_frame_vertical.jpg'
};

<script type="text/javascript" src="jp_borders.js"></script>

The HTML

All you have to do is on the img (or div) you want to have borders applied to is add the css class “jp-auto-borders” to it.

<img src="http://static.punteney.com/imgs/parrot_t286.jpg" width="286" height="370" class="jp-auto-border" />

That’s all there is to it. The Javascript will take care of the rest.

Customization Options and Settings

Here are some additional ways to customize the script if needed.

Settings Object

Most of the configuration options you’ll want to change are set through the settings object. By default it looks for YAHOO.JP.borders.default_settings for this object, but you can pass in a custom one to the auto script or the main object. This is most useful if you have different borders you want to show on different items. Settings defined in the settings object are:

• top_border_src (required) - This is the url to the image that will make the top border of the image.
• bottom_border_src (required) - This is the url to the image that will make the bottom border of the image.
• left_border_src (required) - This is the url to the image that will make the left border of the image.
• right_border_src (required) - This is the url to the image that will make the right border of the image.
• css - This is a dictionary of any css attributes to be applied to the containing div. Some of the most commonly applied options are items such as specifying the float style of the image and the margins.
• tags - This is used by the auto border program to limit what type of elements the border will be applied to the most common entries would be “div” or “img”. Defaults to “img”
• find_class - This is used by the auto border program to determine what css class to look for to automatically apply the borders around the object. Defaults to “jp-auto-border”

Starting the Script

By default the last line in the jp_borders.js file starts the script automatically by running ‘YAHOO.JP.borders.auto’ once the page is loaded. The YAHOO.JP.borders.auto function will automatically search through the files for any matching elements and then create the borders around them. The auto function by default uses the YAHOO.JP.borders.default_settings for all of it’s settings. This will work for most situations, so you don’t need to worry about it generally. The most common time the auto start won’t work is if you want two different types of borders around the elements on the page. Maybe the primary image gets one treatment and the secondary images get a different treatment. The best solution to this is to call the auto function manually passing in a custom settings object, within the settings object specifying the border images but also the “find_class” to specify which objects this border should be applied to.

Additionally if there is a specific element that you want to add the borders around you can add them directly to that element. You can call YAHOO.JP.borders.Border(el, settings) “el” is the html element you want to apply the borders around and the “settings” is the settings object for the border. That will just put the border around that one html element.