title: Can the shape of the clickable area of an HTML anchor tag be changed?
body: <p>I've been working on a site with a large circular logo in the header. The logo is an anchor tag set up as follows:</p>
  
  <pre><code>&lt;a id="siteLogo" href="#" shape="circle" coords="157,155,147"&gt;&lt;i&gt;Site Logo&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Relevant CSS follows:</p>
  
  <pre><code>i { 
     visibility: hidden; }
  #siteLogo {
     background-image: url(../imgs/sprites_main2.png);
     background-position: 1000px 1000px;
     background-repeat: no-repeat;
     border: none;
     border-radius: 100%;
     display: block;
     height: 294px;
     left: 10px;
     position: relative;
     top: 8px;
     width: 294px; }
  #siteLogo:hover {
     background-position: -15px -324px; }
  </code></pre>
  
  <p>Setting the <code>shape</code> and <code>coords</code> attributes on the anchor tag will give me a link with a circular clickable (opposed to the normal square) area in Opera and Firefox. Chrome, Safari, and IE do not support theses attributes on anchor tags. I did some checking and it seems that HTML5 also does not support these attributes (correct me if I am wrong).</p>
  
  <p>The question I pose to the community is simple. Is there anyway I can achieve a similar result as above that is HTML5 compliant and supported by the major browsers (I can live without IE support) without using an image map or adding any image tags to my HTML?</p>
  
  <p>Javascript or jQuery solutions are acceptable.</p>