Full version: jsB@nk » Image » Image Caption - Surrounding Text
URL: https://www.javascriptbank.com/image-caption-surrounding-text.html
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.
Full version: jsB@nk » Image » Image Caption - Surrounding Text
URL: https://www.javascriptbank.com/image-caption-surrounding-text.html
<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><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><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 thesurrounding paragraph...</p> <p>The text in the paragraphs following the image will automatically wraparound it and its caption, so no more layout headaches when you have tochange captions!</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tationullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit essemolestie consequat, vel illum dolore eu feugiat nulla facilisis at veroeros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tationullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit essemolestie consequat, vel illum dolore eu feugiat nulla facilisis at veroeros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril 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 canstill add HTML to your captions, provided you remember to use singlequotes 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>