title: I can't seem to get this simple code to work
body: <p>This is meant to load an image below the buttons. Each button loads the same image, but with different attributes. Like color, in this example.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $("button").click(function () {
          var imgUrl = $(this).data('rel');
          $("#area").html("&lt;img src='" + imgUrl + "' alt='description' /&gt;");
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;button data-rel="http://i.imgur.com/icb4onK.jpg"&gt;Blue&lt;/button&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;button data-rel="http://i.imgur.com/3mSS06v.jpg"&gt;Red&lt;/button&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;button data-rel="http://i.imgur.com/Su3Rtoy.jpg"&gt;Green&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div id="area"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works here: <a href="https://jsfiddle.net/x3QdU/53/" rel="nofollow">https://jsfiddle.net/x3QdU/53/</a></p>
  
  <p>But when I save a Microsoft Notepad file as test.html (I did select all file types) It will only load the buttons. The buttons do nothing. I don't know if it's an issue in how I added the JavaScript, or if maybe it's my browser. I'm using Google Chrome.</p>
  
  <p>I would also like to know if this code will work in an HTML app on a website.</p>