title: load an image after clicking a button
body: <p>I have a <code>&lt;button&gt;</code> with the <code>rel="example.jpg"</code>. I want the button to load the image in my <code>#area</code> DIV, just <strong>after</strong> clicking on it, not with the page load. So I use this code and everything is done:</p>
  
  <pre><code>$(document).ready(function(){
  $("button").click(function(){
      var imgUrl = $(this).attr('rel');
      $("#area").html("&lt;img src='" + imgUrl + "' alt='description' /&gt;");
  });
  });
  
  &lt;button rel="example.jpg"&gt;Click Me&lt;/button&gt;
  &lt;div id="area"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/tovic/x3QdU/" rel="nofollow">Here</a> is its jsfiddle.</p>
  
  <p>Now I found that the <code>rel</code> is not valid for the <code>&lt;button&gt;</code>.</p>
  
  <p>I'm interested to know other solutions to do this, such as using jquery <a href="http://api.jquery.com/data/" rel="nofollow"><code>.data()</code></a> </p>