“阻挠”用户下载图片April 9, 2008
昨天写的篇文章中，无意间发现从 Flickr 右键下载的图片竟然不是原图。好奇心起，于是就分析起其机制。
原来在它的原图上层，再浮动了与其同宽高的一个像素的透明 GIF 图片。这样，当用户右键点击“图片另存为”时，保存的就是其一像素的 GIF 图片。
这个方法虽然是能防“君子”，但相比 Flash （甚至 ActiveX）等措施，对于客户端的资源占用少了许多。职业病，我考虑的是脚本上的实现。
在不长的时间，这个脚本就实现了，看下 DEMO 或者 打包下载（用法参见页面）。
不过还是出现了几个问题，在这里提下
var m = document.createElement('img');
var element = document.getElementById(element).getElementsByTagName("img");
for(var i = element.length - 1; i >= 0; i--) {
this.insertAfter(element[i], m.cloneNode(true));
}本来的写法是
var m = document.createElement('img');
var element = document.getElementById(element).getElementsByTagName("img");
for(var i = 0; i < element.length; i++) {
this.insertAfter(element[i], m.cloneNode(true));
}出现的问题是 新创建的图片只会插入到第一章图片的后面。
感谢 圆心 同志的排查，原来是插入图片时，新插入的图片节点被加入，导致原先图片节点 length 发生变化。
换个迭代方式就能解决这个问题。
if (document.documentElement.getBoundingClientRect) {
var box = targetElement.getBoundingClientRect();
maskImage.style['top'] = box.top + "px";
maskImage.style['left'] = box.left + "px";
} else {
maskImage.style['top'] = targetElement. + "px";
maskImage.style['left'] = targetElement.offsetLeft + "px";
}依旧很“暴力”的一段代码，主要功能是获取元素在页面中的位置。PPK 告诉我们，尽量避免因兼容性问题，而去检测浏览器类型。
附，看下 YUI 在这方面是怎么做的。
getElementsByTagName（tag）返回的 NodeList 是会自己动态更新的，并非一个静态的列表。PPK 提醒过我们，记住这条。
请问你ff安什么插件在左边有ruler出现，谢谢告知！
@Nation 用 Firebug: http://www.getfirebug.com
这个方法比较老了哦：）
http://www.caishow.com/
很早之前就采用这个方法了，呵呵
其实flash也容易破解，sothink一下或者网络抓包都能抓到地址。
不过貌似有点杀鸡用牛刀了。