Current Version: 2.0 | License: Creative Commons | Download
This is a method which uses Javascript to dynamically attach a custom border to an image, regardless of its width or height. It is practical for several uses, such as an image gallery containing images with different sizes or a website that uses different sized images throughout. The benefit to using this method is the ability to easily attach a custom dynamic border just by calling a single class in the img tag.
The new version of Dynamic Image Borders no longer relies on jQuery, saving the user around 30K in file size. It also no longer requires any extra CSS to be included as that is handled by the new Javascript file. Version 2.0 is easier to implement, only weighs about 3K, and has been tested on Firefox 3, Safari 3, Internet Explorer 6 and 7.
Questions and comments can be posted at this related journal post.
The first step is to create the graphics that make up the border. There will be eight in all: one for each of the four corners, and one for each of the four sides. When naming these graphics you'll want to use the following naming-convention:
| File Name | Placement | Example |
|---|---|---|
| img-t-l.gif | Top Left |  |
| img-t-c.gif | Top Center |  |
| img-t-r.gif | Top Right |  |
| img-m-l.gif | Middle Left |  |
| img-m-r.gif | Middle Right |  |
| img-b-l.gif | Bottom Left |  |
| img-b-c.gif | Bottom Center |  |
| img-b-r.gif | Bottom Right |  |
This image shows where the border should be sliced to make the required eight images for the Dynamic Image Border method.
Insert the following JavaScript into the head of your HTML document. In the Javascript file, you need to supply the variable, borderWidth the value of the width of your border. In the examples used in this page, I've created a 10 pixel border to surround the images. You also need to supply the variable, imgFolder the location of where the border images are stored.
<script type="text/javascript" src="js/dib-2.0.pack.js"></script>
This is what makes this method so great—it's very easy to implement. Simply include the class, shadow in the img tag you want the border applied to.
<img src="imagename.jpg" class="shadow" alt="Some alternative text" />
It's not really much to look at since all the magic takes place when the page has loaded, but all of the following images are using the Dynamic Image Border Method.
