How to display a Gravatar Image with 100 Percent Client Script Code
By Peter Bromberg
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.
Popularity (2880 Views)
 |
| Biography - Peter Bromberg |
Peter Bromberg is a C# MVP, MCP, and .NET expert who has worked in banking, financial and telephony for over 20 years. Pete focuses exclusively on the .NET Platform, and currently develops SOA and other .NET applications for a Fortune 500 clientele. Peter enjoys producing digital photo collage with Maya,playing jazz flute, the beach, and fine wines. You can view Peter's UnBlog and IttyUrl sites. 
|  |
|
|
Article Discussion: How to display a Gravatar Image with 100 Percent Client Script Code