如何自动给图片或照片加说明文字,使用MooTools

MooTools 是一个强大的,开源的JavaScript框架,它可以大大提高我们的JavaScript开发效率。使用MooTools 你可以写出更加简洁和优雅的JavaScript程序。
我们今天所讲的实例,就是使用MooTools开发一个给图片自动配说明文字或备注的实例。

接下来,就是我们实现的思路:

  • 选择所有要加说明文字的图片,如类名是captioned的图片。
  • 采取其图片的title属性或alt属性,作为图片说明标题的内容。
  • 在图片下方正确的显示说明文字。

How to Auto Caption Images

在WEB标准设计中img标签有规范的写法。我们要重视WEB标准。

知识扩展:img图片中的Alt Text 属性和Title属性的区别及规范的HTML写法

HTML

<img class="captioned" src="red_rocks.jpg" title="Photo of Red Rock Mountain." width="300" height="201" />

这里有几个要点:

  • 如果我们的图片既有一个 title attribute和 alt attribute, 我们将采取的title attribute的值,不用 alt attribute.
  • 如果我们的<img> 标签没有设置title或alt属性,我们要提醒用户,我们需要其中的一个属性。
  • 声明的宽度属性的值是我们的脚本需要或将打破。

  • Declaring the value of the width property is required or our script will break.

一但我们获得test为我们的标题文本,我们需要创建一个新的DOM元素,一个段落元素(<p>)称为标题,将包含我们的标题文本。

一但创建了标题,我们将创建一个DOM元素(a div)包含我们的图片和说明文字。

通过DOM操作,我们将生成如下的HTML结构:

Auto Caption Images DOM

当然,这发生在幕后,下面的HTML 代码,就是我们运行mootools脚本生成的。

1
2
3
4
5
<div class="figure">
  <img class="captioned" src="red_rocks.jpg"
    title="Photo of Red Rock Mountain." width="300" height="201" />
  <p class="caption">Photo of Red Rock Mountain.</p>
</div>

CSS

使用一些基本的样式规则来控制我们的图片标题 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
img {
	padding:5px 0;
}
div.figure {
    width:310px;
    text-align:center;
    border:1px solid #ccc;
    background-color:#f2f2f2;
    margin:5px;
    float:left;
}
p.caption {
    padding:0;
    margin:0 0 5px 0;
    font:italic 12px Georgia, "Times New Roman", Times, serif;
    color:#333333;
}

div.figure 将成为我们的图片和说明文字的容器;

p.caption 将成为我们的实际标题;

我们将使用mootools,把这两个东西插入到文档对象模型(DOM)中。

代码的逻辑:DOM 操作

我们现在进入代码创作,让我们一步,通过我们的努力来实现需求。

首先,我们要选择所有需要加说明文字的图片,如类名是captioned的图片。然后为每个图片设置符合我们的要求,我们将:

  1. 确定它是否有一个alt或title属性。
  2. 如果它没有一个alt或title属性,我们将提示用户,该图片所需要的alt或title属性是必须的。
  3. 如果我们发现图片的alt或title属性是存在的,那么我们将使用图片的title属性的值为我们的标题(即图片说明文字)。

MooTools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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() + 10
          }
      });
      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.');
    }
  });
});

演示:live demo here

下载:source file package here.

原英文教程:http://sixrevisions.com/tutorials/mootools-tutorials/how-to-auto-caption-images-using-mootools/

站点统计