图像热区的小把戏彩蛋

或许你很惊奇他们是怎么做到的，这就是图像热区（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 的朋友就不要尝试了）？

赞 (0)

相关推荐

  • 图像热区的小把戏彩蛋

    或许你很惊奇他们是怎么做到的,这就是图像热区(Map)的一个应用.下面引用一段 Map 的解释: 所谓图像热区,就是带有预先定义区域的图像,这些区域包含了指向其它文档或锚的链接. 例如,你可以在一副太阳系的图像上创建用户点击后可浏览不同星球的链接.具体的详细情况可以参考这里和这里.比如说上述的菜单就是将一个 map 定义到了首页的 Logo 上,然后效果就是点击这张图片的一部分就执行相应操作(Javascript 控制).比如: <area shape="rect" coords

  • Android时间设置的3个小彩蛋分享

    目录 问题现象 源码分析 实践验证 结论 问题现象 最近处理了一个非常有意思的系统bug,修改系统时间,重启后居然没有生效 注意要关闭使用网络提供的时间和使用网络提供的时区这两个开关. 重启后显示的时间日期为 显示的时间既不是我设置的时间,也不是当前时间(当前时间为2023-03-20 15:49),那么显示的这个时间到底是什么时间呢? 为了弄清楚这个问题,我研究了一下Android设置时间的逻辑,研究过程中还发现了一些彩蛋. 源码分析 首先是设置时间的逻辑,源码位于packages/apps/

  • php4的彩蛋

    今天看了一些代码,看到了一个小彩蛋. <? /* env.php */ phpinfo(); ?> 用浏览器访问 http://ipaddress/dirname/env.php?=PHPE9568F36-D428-11d2-A769-00AA001ACF42 你将看到!    一个胖子嘴中刁着两支烟!:-) 秘密在logos.h中用数组定义的图像数据. unsigned char php_egg_logo[] = {      71, 73, 70, 56, 57, 97, 130,  0,

  • 如何使用“PHP” 彩蛋进行敏感信息获取

    如何使用“PHP” 彩蛋进行敏感信息获取

    关于"PHP彩蛋"的说法也许很多老PHPer已经都知道或听说了,好像是早在PHP4版本的时候就有彩蛋了,挺好玩儿的,可能近年来逐渐被人们遗忘了,其实彩蛋功能在PHP脚本引擎默认情况下是开启. 写个phpinfo();然后访问,再加上以下的GET值即可查阅下面就用Discuz官方论坛做一下测试:http://www.discuz.net/?=PHPE9568F34-D428-11d2-A769-00AA001ACF42http://www.discuz.net/?=PHPE9568F35

  • PHP彩蛋信息介绍和阻止泄漏的方法（隐藏功能）

    Easter Eggs(复活节彩蛋)外行人估计不了解这是神木玩意,彩蛋的网络解释是:用于电脑.电子游戏.电脑游戏.影碟或其他互动多媒体之中的隐藏功能或信息.PHP包含一个安全漏洞,可能导致未经授权的信息披露,如果你正在运行PHP,就有可能会被人发现PHP版本和其他敏感信息.我觉得有必要解决这个彩蛋问题来确保你网站的安全性. PHP彩蛋是如何运作的 只要运行PHP的服务器上,访问任何网页都可以在域名后添加以下字符串来查看信息: 复制代码 代码如下: ?=PHPB8B5F2A0-3C92-11d3-

  • 在iOS中实现谷歌灭霸彩蛋的完整示例

    在iOS中实现谷歌灭霸彩蛋的完整示例

    前言 最近上映的复仇者联盟4据说没有片尾彩蛋,不过谷歌帮我们做了.只要在谷歌搜索灭霸,在结果的右侧点击无限手套,你将化身为灭霸,其中一半的搜索结果会化为灰烬消失...那么这么酷的动画在iOS中可以实现吗?答案是肯定的.整个动画主要包含以下几部分:响指动画.沙化消失以及背景音效和复原动画,让我们分别来看看如何实现. 图1 左为沙化动画,右为复原动画 响指动画 Google的方法是利用了48帧合成的一张Sprite图进行动画的: 图2 响指Sprite图片 原始图片中48幅全部排成一行,这里为了显示

  • Android不规则图像填充颜色小游戏

    Android不规则图像填充颜色小游戏

    一.概述 近期群里偶然看到一哥们在群里聊不规则图像填充什么四联通.八联通什么的,就本身好学务实的态度去查阅了相关资料.对于这类着色的资料,最好的就是去搜索些相关app,根据我的观察呢,不规则图像填充在着色游戏里面应用居多,不过大致可以分为两种: 基于层的的填充 基于边界的填充 那么针对上述两种,我们会通过两篇博文来讲解,本篇就是叙述基于层的填充方式,那么什么基于层的填充方式呢?其实就是一张图实际上是由多个层组成的,每个层显示部分图像(无图像部分为透明),多层叠加后形成一张完整的图案,图层间是叠加

  • 微信小程序 扭蛋抽奖机css3动画实现详解

    微信小程序 扭蛋抽奖机css3动画实现详解

    前言 最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了.先上动图 wxml文件: <view class="ball-box"> <image class="ball ball_1 {{start?'weiyi_1':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.pn

  • JS 网页彩蛋 实现代码

    .bg{ background:url(http://nba.titan24.com/focus/kikx/images/sp.gif) repeat;} p{ text-align:center; color:#d00; padding:10px 0; } h1{ text-align:center; font-size:80px; color:#f06; line-height:120px;} 按 ↑ ↑ ↓ ↓ ← ← → → function trick(e){ if(typeof wi

  • JavaScript 图像动画的小demo

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>图形动画</

随机推荐