冰古blog » 站长相关 » 2009 » 09 » 09 » 实时显示Gravatar头像

实时显示Gravatar头像

实时显示Gravatar

在阅读一些外国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头像

55 Responses to “实时显示Gravatar头像”

  1. leejon says:

    准备折腾这一步,尝试了几次还没成功。先留名

  2. Roy says:

    永网志 😉

  3. 凡。 says:

    学习学习。。 😉

  4. […] 两天前折腾出一个用JavaScript实时显示Gravatar头像的效果。也就是说留言时,你输入email后,就会实时显示你的Gravatar头像。你要说这个效果有什么用,我的答案是“没什么用,只是用来耍耍裤酷而已 ”。 […]

  5. Fanr says:

    😆 果然耶~不过建议博主换套表情吧~~

  6. jenemy says:

    哎 收一下代码试试看

  7. 刚刚改变了头像,在这里看看

  8. lxy says:

    也不是很实用

  9. zzl says:

    太棒了这个.. 😉

  10. jerrybo says:

    😉 又来了!!

  11. 3G博客 says:

    图标?前几天别人教的,刚弄!

  12. daiyuyang says:

    有意思,留个印

  13. 路个的 says:

    被你朋友介绍来,但觉得以前就来过,呵呵。

  14. fslin says:

    奇怪,我把名字、邮箱、网址都输完了,都写到这了,也没看到头像显示出来啊。

  15. 柳净园 says:

    才明白是什么意思,原来是这样的。输入email就显示头像,不是发表后显示。嘻嘻

  16. 柳净园 says:

    不是实时显示的吗?我看许多blog都是实时的呀

  17. Qiang says:

    我是来试试有没有实时显示的…
    貌似没有啊…

  18. chaim says:

    测试留言

  19. 冰古 says:

    测试下留言。

  20. 左岸读书 says:

    头像的意思是不是每次都可以照镜子~

  21. Donald says:

    后排占座。顺便猥琐地等待技术支持~哈哈。 :mrgreen:

  22. […] 两天前折腾出一个用JavaScript实时显示Gravatar头像的效果。也就是说留言时,你输入email后,就会实时显示你的Gravatar头像。你要说这个效果有什么用,我的答案是“没什么用”,只是耍耍裤酷而已:lol:。 […]

    • 爱旅游 says:

      其实也不是完全用来耍酷。。。
      这个头像和Email一般的来说,是不经常更换的,
      所以,在常见的这些人之中,往往看到某个头像就知道他是谁了。

      经常更换头像和Email地址的就不说了。浪费时间。

  23. 雪深 says:

    不错 呵呵 我有两个邮箱都有通用头像

  24. Kevinick says:

    貌似代码没有验证输入的东西是不是EMAIL 😉

    • 冰古 says:

      毕竟不是用于保存数据到数据库中,所以觉得没有什么必要进行验证。

      • Kevinick says:

        😛
        了解,哈哈
        我E动网的域名是在新网注册的,没你那个在新网互联注册麻烦。可以直接申请AuthCode,转移到NAME.COM目前进行到4/6步,正在等待“transfer to be approved”中,看英文提示的意思,应该是在5天左右搞定。

  25. Alex says:

    这功能蛮不错的,但我现在留言咋还没有看到我的头像呢?

  26. feicun says:

    挺好玩的功能,不过对于我博客的很多读者,他们本身就没有Gravatar头像,用处也就不大了 😥

  27. zwwooooo says:

    这很人性化

  28. Bindiry says:

    在Google Chrome下似乎没效果。 🙄

    • 冰古 says:

      Webkit的onchange事件似乎有点问题,改用onblur了,现在基本上有效果了。(还是有点问题,就是要用键盘输入才能起效果,暂时先用用,看看还有没有其他方法可以搞定的。)

  29. wayne says:

    咦,这里没有启用么?

Leave a Reply to 冰古