CSS 图像热区的小把戏 ⁴

2007-12-27 13:22:25

很少有人知道，其实 Yahoo 中国和淘宝网的首页有一个彩蛋。想亲身体验一把的话，你可以打开上述网站，全部载入完毕以后点击雅虎中国 Logo 的惊叹号或者是淘宝网 Logo 上面的“淘”字或者“宝”字上面的点，然后你发现了什么呢？

或许你很惊奇他们是怎么做到的，这就是图像热区（Map）的一个应用。下面引用一段 Map 的解释：

所谓图像热区，就是带有预先定义区域的图像，这些区域包含了指向其它文档或锚的链接。
例如，你可以在一副太阳系的图像上创建用户点击后可浏览不同星球的链接。

具体的详细情况可以参考这里和这里。比如说上述的菜单就是将一个 map 定义到了首页的 Logo 上，然后效果就是点击这张图片的一部分就执行相应操作（Javascript 控制）。比如：

<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun" />

就可以在热区所定义的位置 "0,0,82,126" 打开 sun.html 的链接。那么 Javascript 如何控制其行为呢，其实你完全可以将 area 元素当作 a 元素来看待，它也有 onclick 等方法。

至于是如何播放声音的，我看了下代码，是一个简单的 Flash 在“作怪”。之所以做成 Flash 有两个原因，一是容量比较小，二就是兼容大部分的浏览器（只要装了 Flash 的插件就可以）。

忘记那那该死的 embed 吧，它只支持 Internet Explorer，而且不是 Web 标准的一部分。Alistapart 上面有一篇文章，名叫 Bye Bye Embed，非常的精彩，建议如需要在网页中插入其他元素的可以参考一下。

好了，说了那么多，朋友你能看出来本网站的 Logo 有什么特殊的地方吗（使用 Internet Explorer 的朋友就不要尝试了）？