简单的,流行的,可交换的图片字幕,基于CSS and MooTools

我在《如何自动给图片或照片加说明文字,使用 MooTools »》这篇文章中,介绍了如何给图片自动加说明文字的做法,然而,有的时候我们更喜欢比较时尚和可交换的图片说明文字。

虽然他们都说一张照片胜过千言万语,但是不是每一个形象都是不言自明的。有的时候,一句简短的说明文字或在背景上说几句话可以使图像得以区别。这就是为什么图片说明文字(图片字幕)往往是一个好的用户体验。

像图片的下方配有简单的文字说明的应用场景有点死板,虽然起到了图片说明的作用,但是有点用户觉的没有那个必要,因为他很自信,相信自己的理解能力,给图片配有相应的说明文字是多此一举。相反有些用户是希望有图片文字说明的。

既然,我们已经明白了用户的需求,接下来,就需要我们进一步去落实了。

我一直喜欢给予图片说明,但我很少这样做。为什么不呢?原因来自以下:

  1. 需要添加大量过剩的HTML标签。
  2. 老网站,难以重新设计。
  3. 图片和说明文字之间保持着某种固定的关系。
  4. 以上原因都有。

今天,我提出一个新的解决方案,解决了以前遗留下来的问题。

Swappable-Image-Captions

 

那就先看下一演示吧,

 

View Demo »

 

以前网页上遗留下的图片代码是类似这样写的

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; 
}

 

View Demo »

 

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

站点统计