How to display a Gravatar Image with 100 Percent Client Script Code

Use javascript MD5 hash generator to display a Gravatar image with Client-side code.

The Gravatar has become a very popular way to display an image using the owner's email address. If you are interested in the details, or would just like to get your own Gravatar, visit here.

In a nutshell, displaying a gravatar for a user of your forums or website is as simple as appending the MD5 hash of their registered email address to the gravatar "base url". Most developers add a ".jpg" suffix to that.

Recently I came across an excellent javascript implementation of the MD5 Hash algorithm, so I thought it would be an interesting exercise to set up a little page illustrating how this can be used to display somebody's Gravatar images with all client-side script.

An example test page can be seen here.

Here is the code for the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Gravatar Client Display</TITLE>
<script src="MD5.js" type="text/javascript"></script>
<script>
function getIt()
{
var base = "http://www.gravatar.com/avatar/";
var email = document.getElementById("email").value;
var hash = MD5(email);
var fullUrl = base+hash +"jpg";
document.getElementById("avatar").src=fullUrl;
document.getElementById("avatar").style.display="block";
}
</script>
</HEAD>
<BODY>
Enter Email for Gravatar:
<input type="text" id="email" />
<input type="button" value="Show Gravatar" onclick="getIt();"/>
<img id="avatar" src="" style="display:none">
</BODY>
</HTML>

The MD5.js source code is in the downloadable zip file. Enjoy.


You can download the working sample here.

By Peter Bromberg   Popularity  (5910 Views)