The arc90 lab is the playground of arc90 - a New York-based technology and strategic consulting firm. The lab is a place for us to share our ideas, tools and the occasional experiment in web technology. All ideas, experiments and tools are licensed under Creative Commons.
This site is licensed under a Creative Commons Attribution 2.5 License.
Tools
Image Caption
Wrestling with image and text positioning is no fun. Let Image Caption, the third tool from the Arc90 lab, make all of the hard work turn into cutting and pasting. All it takes is a script and some style to make your images nice and labeled.
What is this?
If The New York Times has captions on their images, why shouldn't everyone be able to have them? With the help of Image Caption, adding text to accompany regular old <img> tags couldn't be easier. Give your image a "title" -- how appropriate! -- and a class, and in less than a minute you'll have beautiful looking captions for your images.
How Do I Use It?
Download The Code
Click on the icon below to download the source code for Image Caption:
The file, imgcaption.zip, contains the script and an example page. Upload the script to your site and you're ready to roll.
Link to the Javascript and Add Style
Add a link to the javascript in the page(s) you'd like Image Caption implemented. Remember to adjust the path to properly point to the location of the file on your server. Then, you need to add a line of CSS code.
You can copy this entire block and paste it into your <head> section:
Give Your Image a Title and a Class
Adding a caption to an image is as simple as specifying a title and a class. Write your image's caption in its title attribute and then put "imgcaption" in its class attribute. That's all there is to it.
Need to Switch Sides?
If you add the "floatr" class to your image, it will float on the right side of your text instead of the left.
Text Formatting in Captions
Even though you're working within a tag's title attribute, you can still add HTML to your captions, provided you remember to use single quotes and escape your less than and greater than signs. For example:
- This picture is from our trip to <a href='http://www.bahamas.com/'>the Bahamas</a>.
- You may <strong>not</strong> use this image without asking permission!
Examples
You can see Image Caption in action by clicking here.
Supported Browsers
Currently, the Image Caption script has been tested and confirmed on the following browsers:
- Internet Explorer 6.0+
- Mozilla Firefox 1.5+
- Apple Safari 2.0
- Opera Version 8.51
Licensing
This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.
Discuss Image Caption
You can send feedback on Image Caption at the arc90 blog.
