title: Using images as hyperlink in javascript for Windows 8 metro
body: <p>In my home.html I have:</p>
  
  <pre><code>&lt;a href="/pages/page2/page2.html"&gt;Go to page2&lt;/a&gt;
  </code></pre>
  
  <p>which is handled by home.js:</p>
  
  <pre><code>WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
  </code></pre>
  
  <p>and linkClickEventHandler defined:</p>
  
  <pre><code>function linkClickEventHandler(eventInfo)
  {
     eventInfo.preventDefault();
     var link = eventInfo.target;
     WinJS.Navigation.navigate(link.href);
  }
  </code></pre>
  
  <p>As you can see, I am overriding the behaviour of <code>&lt;a&gt;</code> to use Page Control navigation instead of normal HTML navigation.</p>
  
  <p>When clicking on "Go to page2" it successfully changes the Page Control from home.html to page2.html</p>
  
  <p>Now what if instead of just text "Go to page2" I want to use an image inside the <code>&lt;a&gt;</code> tags:</p>
  
  <pre><code>&lt;a href="/pages/page2/page2.html"&gt;&lt;img src="page2.png" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>This doesn't seem to work. I've gotten the image to load up and showing but when I click on it it seems to try to display the image in text format as the page control changes to some garbage text full of unknown (square) characters that start with 'PNG... PHOTOSHOP..." (I used photoshop to create the image) </p>
  
  <p>I've also tried adding:</p>
  
  <pre><code>WinJS.Utilities.query("img").listen("click", linkClickEventHandler, false);
  </code></pre>
  
  <p>but it doesn't do anything</p>