在阅读一些外国Wordpress blog时，冰古都会留意到在留言的位置上会有一个Gravatar的图片，毫无疑问这是用于显示留言者的Gravatar。当我输入email地址后，我预计该Gravatar图片会实时地显示为我输入email对应的Gravatar。但很遗憾，在我写这篇文章之前我都没有发现有实时显示Gravatar的blog。没有，那我就弄一个吧。
实时显示也就是用JavaScript来实现，而Gravatar图片的链接没有什么秘密，很简单就能得到，“http://www.gravatar.com/avatar/”加上用md5转换email得到的一组字符串，就是该email对应的Gravatar头像图片。关键的是JavaScript没有内置md5加密函数，但也很幸运，早就有人编写了JavaScript的md5函数。
既然有了md5函数，那实现实时显示Gravatar头像也就变得简单了，只需用onchange捕获email输入框中的变化，然后用hex_md5函数转换email地址并组合成对应的Gravatar图片链接，最后用setAttribute改变img的src地址就搞定了。相关的JavaScript代码如下：
<script type="text/javascript" src="js_md5.js"></script><!-- 这个js文件在http://pajhome.org.uk/crypt/md5/md5.html获得 -->
<script type="text/javascript">
/* <![CDATA[ */
var ga = document.getElementById("gravatar");
var email = document.getElementById("email");
// webkit的onchange事件似乎有点问题，用onblur代替。
var Ka=navigator.userAgent.toLowerCase();
var chrome = Ka.indexOf('webkit') != -1;
if (chrome) email.onblur = changeGravatar;
else email.onchange = changeGravatar;
function changeGravatar(){
email_value = email.value;
email_md5 = hex_md5(email_value);
new_ga = "http://www.gravatar.com/avatar/" + email_md5 +"s=50&d=identicon&r=G";
newGravatar(new_ga);
}
function newGravatar(new_ga){
ga.setAttribute('src', new_ga);
}
/* ]]> */
</script>
详细的代码可以看实时显示Gravatar头像 – 示例
留言测试来这里 ➡ 为WordPress添加实时显示的Gravatar头像
准备折腾这一步，尝试了几次还没成功。先留名
永网志 😉
学习学习。。 😉
[…] 两天前折腾出一个用JavaScript实时显示Gravatar头像的效果。也就是说留言时，你输入email后，就会实时显示你的Gravatar头像。你要说这个效果有什么用，我的答案是“没什么用，只是用来耍耍裤酷而已 ”。 […]
😆 果然耶~不过建议博主换套表情吧~~
表情這東西用經典的也是可以的。 😉
哎 收一下代码试试看
踩一下
刚刚改变了头像，在这里看看
也不是很实用
你都没有头像。而且这东西当然不实用，炫而已。
哈哈，原来你有头像的，抱歉。我用的客户端load得比较慢。
太棒了这个.. 😉
😉 又来了！！
图片在哪
请先到这里上传你的头像 http://gravatar.com
图标？前几天别人教的，刚弄！
有意思，留个印
被你朋友介绍来，但觉得以前就来过，呵呵。
奇怪，我把名字、邮箱、网址都输完了，都写到这了，也没看到头像显示出来啊。
呵呵，这个主题没有加上，到玩WordPress留言测试下。
呵呵，知道这个功能，但是一直没有注册。
才明白是什么意思，原来是这样的。输入email就显示头像，不是发表后显示。嘻嘻
不是实时显示的吗？我看许多blog都是实时的呀
我是来试试有没有实时显示的…
貌似没有啊…
这个主题我没有添加，去玩WordPress留言试试。
测试留言
测试下留言。
头像的意思是不是每次都可以照镜子~
呵呵，照镜子？到玩WordPress留言试试吧。
后排占座。顺便猥琐地等待技术支持～哈哈。
不用技术支持了吧，自己改改代码就可以了。
[…] 两天前折腾出一个用JavaScript实时显示Gravatar头像的效果。也就是说留言时，你输入email后，就会实时显示你的Gravatar头像。你要说这个效果有什么用，我的答案是“没什么用”，只是耍耍裤酷而已:lol:。 […]
其实也不是完全用来耍酷。。。
这个头像和Email一般的来说，是不经常更换的，
所以，在常见的这些人之中，往往看到某个头像就知道他是谁了。
经常更换头像和Email地址的就不说了。浪费时间。
不错 呵呵 我有两个邮箱都有通用头像
貌似代码没有验证输入的东西是不是EMAIL 😉
毕竟不是用于保存数据到数据库中，所以觉得没有什么必要进行验证。
😛
了解，哈哈
我E动网的域名是在新网注册的，没你那个在新网互联注册麻烦。可以直接申请AuthCode，转移到NAME.COM目前进行到4/6步，正在等待“transfer to be approved”中，看英文提示的意思，应该是在5天左右搞定。
我那两个域名转移够郁闷的，不过现在好了，不用再烦了。
这功能蛮不错的，但我现在留言咋还没有看到我的头像呢？
呵呵，还没加到blog上呢
挺好玩的功能，不过对于我博客的很多读者，他们本身就没有Gravatar头像，用处也就不大了 😥
那更应该推广一下Gravatar了。
关键是读者的群体就在那摆着，大部分都是玩QQ空间的，我推广不了啊
所以我一直都说QQ的危害是很大的。 🙁
我觉得校内也是……
校内没怎么搞，不过QQ就没办法了 😐
这很人性化
的确挺有意思的。
BTW，换域名了，竟然还有三位的.me，真不错。 😉
因为原来的域名是国内买的，令人不爽。想着换，运气不错，zww的竟然就剩下.me的了
运气的确不错， 😉
在Google Chrome下似乎没效果。 🙄
Webkit的onchange事件似乎有点问题，改用onblur了，现在基本上有效果了。（还是有点问题，就是要用键盘输入才能起效果，暂时先用用，看看还有没有其他方法可以搞定的。）
咦，这里没有启用么？
暂时还没有，等下才搞。