Version complète: jsB@nk » Image » Légende Image - Environs Texte
URL: https://www.javascriptbank.com/image-caption-surrounding-text.html
Avec l'aide de ce script, l'ajout de texte pour accompagner les images ne pouvaient pas être plus facile. Donnez à votre image un "title" - comment approprié - et un className, et en quelques secondes, vous aurez beau chercher les légendes des images. Et, vous pouvez utiliser les éléments HTML.
Version complète: jsB@nk » Image » Légende Image - Environs Texte
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>