Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chữ bao quanh ảnh
URL: https://www.javascriptbank.com/image-caption-surrounding-text.html
Với hiệu ứng này, bạn có thể làm cho chữ bao quanh một ảnh chỉ định dễ dàng hơn; chỉ cần thêm vào ảnh một lớp và thuộc tính title chứa nội dung bao quanh, hiệu ứng sẽ tự phân tích và làm giúp bạn. Và đặc biệt bạn có thể sử dụng các thẻ HTML cho phần nội dung bao quanh.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chữ bao quanh ảnh
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>