FullSize:一个新的IMG标签属性(附带jQuery实现)
“img标签添加了一个新属性么?”,看到标题你也许会惊奇的问。呵呵,千万莫误会,这只是一位国外Web设计师的主张而已。为了推销他的想法,他建立了这个主题网站(你可以在这个页面的下方签名,表示支持),而且用Jquery插件模拟了它。他的这个想法真的很有意思,也很有意义。我这里对它的想法做个简单翻译,略表支持。
FullSize属性是什么?
我们在网页设计中,经常会使用这样一种解决方案:当点击页面中的某否图片时,使用Javascript/Ajax技术用弹出层等方式获取这张图片的原始图片(或大尺寸图片)。我们可以注意到,这在当前的网页设计中,尤其是图片展示站点的设计中被广泛应用。既然这样,为什么这项功能不能成为一个标准,为什么不是由浏览器实现而是让设计师费尽心思去设计。所以我建议能够在img标签中添加一个fullsize属性,可以用来指定”src”中图片的大尺寸图片,浏览器可以原生支持点击图片时弹出大尺寸的图片。
我希望这样一个提议能够得到W3C组织的关注,在下一个html版本中的img标签中添加fullsize属性,从而使他成为一个标准。我认为这绝不仅是一个貌似好听的主意,它将对Web设计师有很大的帮助。如果你有什么好的想法或更好的建议,可以在Fullsize Google Group中讨论。
关于Fullsize属性设想的一些问答
-为什么要添加Fullsize属性,而不是用javascript实现?
Fullsize属性是希望这样一个常用功能能够轻松实现。当我们想实现这个功能时,仅仅是记住在img标签中加入fullsize属性就可以了。当然,如果你不愿意使用fullsize属性,你也可以自己用javascript实现。
-如果Javascript被禁用,fullsize属性会不会失效?
我的建议是fullsize属性可以得到浏览器的原生支持,所以它与javascript是否禁用是不相干的。
-我不需要浏览器加入这样的功能,因为我对图片的弹出样式无法控制?
如果fullsize属性可以加入到下个版本的html中,它也应当能得到css的支持。如果你不喜欢浏览器这样去实现你也可以自己使用javascript实现。虽然能够得到css的支持会更好些,但我认为它并不是十分必要。
模拟这一想法的jQuery插件
尽管这一想法目前还不能通过html实现,不过我创建了一个jquery插件可以实现它。因为目前img标签中没有fullsize属性,我使用longdesc(不知道img中的longdesc属性?了解一下)来代替它。longdesc是img标签的合法属性,它原本是用来指向一个图片详细描述的url。这款Jquery插件非常容易就可以上手的,而且它在Safari,Firefox,Chrome,IE8,IE7,IE6中都测试通过。
下载这款插件:Fullsize Jquery Plugin [大小:23.59 KB - 下载次数:125]
它的压缩版本仅有8kb!注释版本是12kb。如何使用它:
1. 下载插件后,引用插件包中的js和css文件(当然,在这之前你要引用jquery代码文件),如下:
<link href="your_path_here/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="your_path_here/fullsize/jquery.fullsize.js"></script>
2. 为页面中所有img标签绑定fullsize功能:
$("img").fullsize();
3. 在html的img标签中指定longdesc属性,例如:
<img src="me.jpg" alt="me" longdesc="me-big.jpg" />
这款插件同时可以设定一些参数,例如弹出图片是否有阴影,图片弹出速度等等,详细内容可以在作者网站找到
我这里做了一个例子,可以直观的看一下它的效果。
例子的源代码下载:Fullsize Plugin Example