« »

With the help of this script, adding text to accompany images could not be easier. Give your image a "title" -- how appropriate -- and a className, and in a few seconds you will have beautiful looking captions for your images. And, you can use HTML elements.

Label: image caption, surrounding, caption, className, HTML

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
.arc90_imgcaption {
  text-align: center;
  border: 1px solid #DDD;
  padding: 1em;
  width: 9em;
}

.arc90_imgcaptionTXT {
  font-size: .8em;
  color: #666;
  text-align: left;
}

.floatl {
  float: left;
  margin-right: 1em;
}

.floatr {
  float: right;
  margin-left: 1em;
}
</style>

Copy All x2

<script type="text/javascript">
// Created by: Arc90, Inc. | http://arc90.com/
/* Globals */
var arc90_navigator = navigator.userAgent.toLowerCase();
var arc90_isOpera = arc90_navigator.indexOf('opera') >= 0? true: false;
var arc90_isIE = arc90_navigator.indexOf('msie') >= 0 && !arc90_isOpera? true: false;
var arc90_isSafari = arc90_navigator.indexOf('safari') >= 0 || arc90_navigator.indexOf('khtml') >= 0? true: false;

function arc90_imgcaption() {
var O = document.getElementsByTagName('P'); // For safari???
for (var i = 0, l = O.length; i < l; i++)
	O[i].appendChild(arc90_newNode('span'));

	var O = document.getElementsByTagName('IMG');
	for (i = 0, l = O.length; i < l; i++) {
		var o = O[i];
		if (o != null && o.className && o.className.indexOf('imgcaption') >= 0) {
			try {
				var f = o.className.replace(/(.*)float(l|r)(.*)/, '$2');
				var s = arc90_newNode('div', 'arc90_imcaption'+ i, 'arc90_imgcaption'+ (f.length == 1? ' float'+ f: ' floatl'));

				var I = o.cloneNode(true);
				I.className = 'arc90_imgcaptionIMG';

				s.appendChild(I);
				
				var x = arc90_newNode('p', '', 'arc90_imgcaptionTXT');
				var y = arc90_newNode('p', '', 'arc90_imgcaptionALT');
				var z = arc90_newNode('span', '', 'arc90_imgcaptionALT');

				if (o.alt != '') {
					z.innerHTML = arc90_gtlt(o.alt);
					y.appendChild(z);
					s.appendChild(y);
				}

				if (o.title != '') {
					x.innerHTML = arc90_gtlt(o.title);
					s.appendChild(x);
				}

				o.parentNode.insertBefore(s, o);
				o.parentNode.removeChild(o);

				if (document.all || arc90_isSafari) {
					var w = parseInt(I.offsetWidth);
					if (w != '')
						s.style.width = w +'px';
				} else {
					w = arc90_getStyle(I, 'width', 'width');
					if (w != '') {
						s.style.width = (parseInt(w)) + 'px';
						x.style.width = (parseInt(w)) + 'px';
						y.style.width = (parseInt(w)) + 'px';
					}
				}
			} catch (err) { o = null; }
		}
	}
var O = document.getElementsByTagName('P'); // For safari???
for (i = 0, l = O.length; i < l; i++)
	O[i].appendChild(arc90_newNode('span'));
}

function arc90_gtlt(s) {
	s = s.replace(/>/g, '>');
	s = s.replace(/</g, '<');
	return s;
}

function arc90_getStyle(obj, styleIE, styleMoz) {
	if (arc90_isString(obj)) obj = document.getElementById(obj);
	if (window.getComputedStyle)
		return document.defaultView.getComputedStyle(obj, null).getPropertyValue(styleMoz);
	else if (obj.currentStyle)
		return obj.currentStyle[styleIE];
}

function arc90_findDimension(obj, pType) {
	if (arc90_isString(obj)) obj = document.getElementById(obj);
	var cur = 0;
	if(obj.offsetParent)
		while(obj.offsetParent) {
			switch(pType.toLowerCase()) {
			case "width":
				cur += obj.offsetWidth; break;
			case "height":
				cur += obj.offsetHeight; break;
			case "top":
				cur += obj.offsetTop; break;
			case "left":
				cur += obj.offsetLeft; break;
			}
			obj = obj.offsetParent;
		}
	return cur;
}

/* Events */
function arc90_isString(o) { return (typeof(o) == "string"); }

function arc90_addEvent(e, meth, func, cap) {
	if (arc90_isString(e))	e = document.getElementById(e);

	if (e.addEventListener){
		e.addEventListener(meth, func, cap);
    	return true;
	}	else if (e.attachEvent)
		return e.attachEvent("on"+ meth, func);
	return false;
}

/* Nodes */
function arc90_newNode(t, i, s, x, c) {
	var node = document.createElement(t);
	if (x != null && x != '') {
		var n = document.createTextNode(x);
		node.appendChild(n);
	}
	if (i != null && i != '')
		node.id = i;
	if (s != null && s != '')
		node.className = s;
	if (c != null && c != '')
		node.appendChild(c);
	return node;
}

/* Onload */
arc90_addEvent(window, 'load', arc90_imgcaption);
</script>

Copy All x2

<p>
<img src="/logos/logo_jsb.jpg" title="Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>, sed diam nonummy nibh euismod <strong>tincidunt ut laoreet</strong> dolore magna aliquam erat volutpat. Ut wisi enim ad minim."
class="imgcaption">And here's some text about the photo in the
surrounding paragraph...</p> <p>
The text in the paragraphs following the image will automatically wrap
around it and its caption, so no more layout headaches when you have to
change captions!</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>
<strong>Text Formatting in Captions</strong><br>
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.</p>
<p>
<strong>Need to Switch Sides?</strong><br>
If you add the <code>floatr</code> class to your image, it will float on the right side of your text instead of the left: <code>class="imgcaption <strong>floatr</strong>"</code></p>