如何自动给图片或照片加说明文字,使用MooTools
MooTools 是一个强大的,开源的JavaScript框架,它可以大大提高我们的JavaScript开发效率。使用MooTools 你可以写出更加简洁和优雅的JavaScript程序。
我们今天所讲的实例,就是使用MooTools开发一个给图片自动配说明文字或备注的实例。
接下来,就是我们实现的思路:
- 选择所有要加说明文字的图片,如类名是captioned的图片。
- 采取其图片的title属性或alt属性,作为图片说明标题的内容。
- 在图片下方正确的显示说明文字。
在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结构:
当然,这发生在幕后,下面的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的图片。然后为每个图片设置符合我们的要求,我们将:
- 确定它是否有一个alt或title属性。
- 如果它没有一个alt或title属性,我们将提示用户,该图片所需要的alt或title属性是必须的。
- 如果我们发现图片的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.'); } }); }); |
原英文教程:http://sixrevisions.com/tutorials/mootools-tutorials/how-to-auto-caption-images-using-mootools/
文章评论 已经有 0 条评论!