简单的,流行的,可交换的图片字幕,基于CSS and MooTools
我在《如何自动给图片或照片加说明文字,使用 MooTools »》这篇文章中,介绍了如何给图片自动加说明文字的做法,然而,有的时候我们更喜欢比较时尚和可交换的图片说明文字。
虽然他们都说一张照片胜过千言万语,但是不是每一个形象都是不言自明的。有的时候,一句简短的说明文字或在背景上说几句话可以使图像得以区别。这就是为什么图片说明文字(图片字幕)往往是一个好的用户体验。
像图片的下方配有简单的文字说明的应用场景有点死板,虽然起到了图片说明的作用,但是有点用户觉的没有那个必要,因为他很自信,相信自己的理解能力,给图片配有相应的说明文字是多此一举。相反有些用户是希望有图片文字说明的。
既然,我们已经明白了用户的需求,接下来,就需要我们进一步去落实了。
我一直喜欢给予图片说明,但我很少这样做。为什么不呢?原因来自以下:
- 需要添加大量过剩的HTML标签。
- 老网站,难以重新设计。
- 图片和说明文字之间保持着某种固定的关系。
- 以上原因都有。
今天,我提出一个新的解决方案,解决了以前遗留下来的问题。
那就先看下一演示吧,
以前网页上遗留下的图片代码是类似这样写的
1 | <img src="my_image.jpg" alt="替换文字" class="captioned" /> |
或者
1 | <img src="my_image.jpg" alt="替换文字" class="captioned" title="图片说明" /> |
如果我们的图片标签既有一个 title 属性和 alt 属性, 我们将采取的title 属性的值,不用 alt 属性.
如果我们的<img>标签没有设置title或alt属性,我们要提醒用户,我们需要其中的一个属性。
自动给图片加说明文字
The MooTools JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $$('img.captioned').each(function(el) { var captionText = ( el.getProperty('title')!=null ) ? el.getProperty('title') : el.getProperty('alt'); if ( captionText!=null ) { var figure = new Element('div', { 'class' : 'figure', 'styles' : { 'width' : el.get('width').toInt() } }); var caption = new Element('p', { 'class' : 'caption', 'html' : captionText }); figure.wraps(el); caption.inject(el,'after'); } else { alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.'); } }); |
所有的图片会包含在类似这样的结构中:
1 2 3 4 | <div class="figure"> <img src="my_image.jpg" alt="" class="captioned" /> <p class="caption">This is going to be my caption!</p> </div> |
以上实现的功能已经在:
如何自动给图片或照片加说明文字,使用 MooTools »文章中具体的介绍过,我这儿就不做具体的讲解了。
可交换的图片说明文字(图片字幕)
当鼠标移动到图片上时,显示相应的图片说明文字,离开图片时就隐藏说明文字,默认的情况下,图片是隐藏相应的说明文字的。
The MooTools JavaScript
1 2 3 4 5 6 7 8 | $$('.figure').addEvents({ mouseenter: function() { this.getElement('.caption').setStyle('display','block').fade('in'); }, mouseleave: function() { this.getElement('.caption').setStyle('display','none').fade('out'); } }); |
完整的代码,来实现图片自动加说明文字和可交换的图片说明文字效果
The MooTools JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | window.addEvent('domready', function() { $$('img.captioned').each(function(el) { var captionText = ( el.getProperty('title')!=null ) ? el.getProperty('title') : el.getProperty('alt'); if ( captionText!=null ) { var figure = new Element('div', { 'class' : 'figure', 'styles' : { 'width' : el.get('width').toInt() } }); var caption = new Element('p', { 'class' : 'caption', 'html' : captionText }); figure.wraps(el); caption.inject(el,'after'); } else { alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.'); } }); $$('.figure').addEvents({ mouseenter: function() { this.getElement('.caption').setStyle('display','block').fade('in'); }, mouseleave: function() { this.getElement('.caption').setStyle('display','none').fade('out'); } }); }); |
The CSS Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .figure { position: relative; } .figure p.caption { display: none; position: absolute; bottom: 0px; left: 0px; width: 94%; margin: 0; padding: 5px 3%; background-color: #000; color: #fff; font-weight: bold; } |
jQuery 版的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(document).ready(function() { $("img.hascaption").each(function() { $(this).wrap('<div class="figure"></div>') .after('<p class="caption">'+$(this).attr("title")+'</p>') .removeAttr('title'); }); $(".figure").width($(this).find('img').width()); $(".figure").mouseenter(function(){ $(this).find('.caption').slideToggle(); }).mouseleave(function(){ $(this).find('.caption').slideToggle(); }); }); |
jQuery版的效果,我认为有两点不完善的地方,图片说明文字的来源应该是 img 标签的title属性或者是alt属性,再上一些逻辑判断就是一个很好的例子,应用时最好像MooTools版那样的逻辑就好了,就会少很多的BUG。
jQuery版的作者:Rob Glazebrook
jQuery 版的原文来自:How To Create Simple, Stylish and Swappable Image Captions
文章评论 已经有 0 条评论!