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

By Rainbow on // JavaScript // 4016 Views+ // (0) Comments

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/

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计