HTML5的一个绘图应用：http://mugtug.com/sketchpad/

HTML5的一个视频解码应用
HTML5视频OGV格式播放 HD 720p. iPhone/iPad Wi-Fi: 496×208 and cellular: 176×74

支持的浏览器（2010-05）：
Safari (v4.0.4+)
Google Chrome (v4.0+)
Firefox (v3.6+)
Internet Explorer 9（预览版）

Chrome Experiments at google IO

现在吃饱饭了没事就胡思乱想，最近在在搜索文章时发现有些文章被引用，而这则文章是之前旧域名是被引用的，如今换上新玉米，也就是说那篇文章的链接都变成了无效链接了，所以突发奇想了：如果这个链接是一个动态的，我可以通过ping的形式修改这个旧链接为新的链接，这样不就可以让无效链接变成正确的链接。

当然上述办法还是行不通的，如果我不小心更换成色情的或者AD的链接，那岂不是害苦对方了，这个是没有办法解决的，只能通过互相信任的方式，也就是说信任对方的站点，那就做上动态的链接，若是不信任做上静态链接（也就是目前所使用的）。

还有个最重要的，那就是我们的浏览器支持啦，我们的W3C进行修正新版，还有IE6忽然间消失了…

我常常处理鼠标事件背景图时为了图便捷，直接用PS切片，复制一个再用PS调整一下颜色作为鼠标经过时显示的图片，直接采用两张图片，一张作为当前一张作为经过时显示。这样做方便以及节省一点点带宽，但是弊端就是加载页面时并没有载入鼠标经过的图片（也就这里节省了），而鼠标经过时才载入图片。这样可想而知的结果就是鼠标经过时有个短暂的图片消失的情况，当浏览器缓存图片过后此情况就不会发生。

这是使用鼠标伪元素切换背景CSS -两张图片

#bt1{ background:url(bt1.jpg) no-repeat center; width:88px; height:31px;}
#bt1:link, #bt1:visited {background:url(bt1.jpg) no-repeat center; width:88px; height:31px;}
#bt1:hover {background:url(bt2.jpg) no-repeat center;width:88px; height:31px;}

页面载入时加载第一张图片（bt1.jpg），当鼠标经过按钮时加载第二张图片（bt2.jpg）

#bt2{ background:url(bt12.jpg) no-repeat 0 0; width:88px; height:31px;}
#bt2:link, #bt2:visited {background:url(bt12.jpg) no-repeat 0 0; width:88px; height:31px;}
#bt2:hover {background:url(bt12.jpg) no-repeat 0 100%;width:88px; height:31px;}

通过限制div长宽尺寸，利用定义背景图位置达到切换效果

为了改善此问题我们可以把两张图片合二为一变成一张图片，这样就能在载入页面时就载入图片，缓存图片，从而鼠标经过时即时的切换图片位置，达到鼠标经过变 化效果。

演示页面

普及一下基础常识，老鸟就无需浪费时间啦

由于本网站已经做了静态化和Gzip压缩，以及把图片等寄存在live.com等，所以唯一想到还能进行优化提速的是：远程寄存较大的脚本和CSS样式

我另存了一个页面到本地，发现其所有文件大小约：400KB大小，其中脚本占了近一半，虽然浏览器能缓存一部分文件，但首次访问还是需要从我这每秒传输约15KB的主机上读取，是相当久的，所以我决定寄存一些脚本到一些国内访问比较快的网站上供我的小站读取，类似谷歌提供jquery脚本引用。

试验证明：部分脚本失败，CSS中图片相对路径出错

唉，有待测试，改日接着写

但今天我要向大家展示的比较非常规的应用，我相信大家看过这个演示后一定会惊叹，一定会记住这个绝对定位应用。

使用了两张透明度的GIF图片作为交叉比较，一个定位一个非定位

演示：绝对定位

发完此文我就开始收敛啦，抱歉

注意：测试之前请保存好浏览器页面数据，因为只有任务管理器关闭浏览器才能关闭

测试方法：查看源码-运行脚本

1.关不掉的窗口

脚本说明：
测试之前请保存好浏览器页面数据，因为只有任务管理器关闭浏览器才能关闭
<input type=button value=做好准备/点击这里 onClick="var e=1;while(1==1){alert('你是关不掉我的，你就哭吧你!!!')}">

2.累死你的手以及有意思的对话

<a href="" onMouseover="alert('为什么把鼠标放到这里?');
alert('我不是说过不可以这样吗？');
alert('你把我的话当什么了？');
alert('你知道错了吗？');
alert('什么？你居然....');
alert('居然还没意识到自己做错了？');
alert('那好，你要为此付出代价!');
alert('我要你在这里点足一千下......');
alert('什么？你开始有点后悔了？');
alert('何必呢？');
alert('你当初干什么去了？');
alert('不原谅你！');
alert('好从现在开始再点995下......');
alert('你的手开始累了吗?');
alert('什么？你已经没力气了？');
alert('你一直在求我原谅你啊！');
alert('看来你是真的知道错了!');
alert('下次你还会这么做吗？');
alert('真的不会了？');
alert('那好，今天就放你一马！');
alert('写封信给我说声对不起!');
alert('你能这么做我很高兴!!!');
document.bgColor='black';
document.fgColor='White';
window.location.href='mailto:1314520o@gmail.com?subject=对不起,下次不敢了!';">不许把鼠标移到这里</a>