Embedding Gravatars in a Web page

tutorial_25_example_1.html

<p>Web Apprentice Gravatar</p>
<pre>http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=80</pre>
<img src="http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=80" alt='gravatar for Web Apprentice' />
<br> <br>
<p>Default Gravatar</p>
<pre>http://www.gravatar.com/avatar/00000000000000000000000000000000?s=80</pre>
<img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?s=80" alt='default gravatar'/>
<br> <br>
<p>Specific Default Gravatar - 'mm'</p>
<pre>http://www.gravatar.com/avatar/00000000000000000000000000000000?s=80&d=mm</pre>
<img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?s=80&d=mm" alt='default gravatar'/>

<br> <br>
<p>Gravatar in 40, 80 and 120 px sizes</p>
<img src="http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=40"  alt='gravatar for Web Apprentice  40px' />
<img src="http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=80"  alt='gravatar for Web Apprentice  80px' />
<img src="http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=120" alt='gravatar for Web Apprentice 120px' />

<br> <br> <hr>
<p>Gravatars inserted by JavaScript</p>
<div id='gravatars'>
</div>

<br> <br> <hr>
<p>Image not found - standard browser </p>
<img src="foo" alt='default gravatar'/>
<br> <br>
<p>Image not found - script uses a specific image</p>
<img src="foo" alt='default gravatar' onerror="img_not_found(this);"/>


<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script>

  $(document).ready(function() {

    // Generate Gravatar URLs from email addresses and insert <img> tags into a div
    var addresses = [ 'apprentice@craic.com', 'no_gravatar@craic.com' ];

    for(var i=0; i<addresses.length; i++) {
      var address = addresses[i];
      var hash = CryptoJS.MD5(address);
      var url = "http://www.gravatar.com/avatar/" + hash.toString() + "?s=80&d=mm";
      $('#gravatars').append("<img src='" + url + "'/> " + address + "<br>");
    }
  });

  // If the image does not exist then use a specific image instead of the browser default
  function img_not_found(image){
    image.src = '/assets/image_not_found.png';
  }
</script>