title: jQuery ImageMapster: Highlighting Issues
body: <p>I'm having some trouble making ImageMapster highlight my map areas.  In reading the  documentation, I'm under the impression that by simply using <strong>$('img').mapster();</strong> I should be able to see my map areas highlight with mouse over.  </p>
  
  <p>I'm not seeing this happen.  I am able to select the areas, but they do not mouse over.</p>
  
  <p>However, if I put onMouseOver and onMouseOut attributes on the map areas, then I can make the highlight function work.</p>
  
  <p>Here's the crux of my issue.  As I'm trying to integrate ImageMapster with some dynamic C# code, I am unable to put onMouseOver and onMouseOut attributes on the map area.  The C# object <strong>WebControls.CircleHotSpot</strong> does not support custom attributes it seems.</p>
  
  <p>So my question is two-fold:</p>
  
  <ol>
  <li>How can I get map area highlighting to work with ImageMapster code only?</li>
  <li>Is there a way to add attributes to the C# object WebControls.CircleHotSpot?</li>
  </ol>
  
  <p>Here is the javascript and HTML markup that I am currently using.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(
      function()
      {
          $('#Image1').mapster({
              fillOpacity: 0.5,
              mapKey: 'alt',
              staticState:true,
              render_highlight: 
              {
                  fillColor: '2aff00',
              },
              render_select: 
              {
                  fillColor: 'ff000c',
              }
          });
  
          $('#Image2').mapster({
              mapKey: 'alt',
  
              stroke: true,
              strokeOpacity: 1.0,
              strokeColor: '000000',
              strokeWidth: 2,
  
              fill: true,
              fillColor: '0000ff',
              fillOpacity: 0.25,
  
              render_select: 
              {
                  fillOpacity: 0.75,
                  fillColor: 'ff0000'
              },
              render_highlight: 
              {
                  fillOpacity: 0.5,
                  fillColor: '00ff00'
              }
          })
      }
  ); 
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;img id="Image1" src="bicycleparts.png" usemap="#ImageMap1" /&gt;
  
  &lt;map name="ImageMap1" id="ImageMap1"&gt;
      &lt;area shape="circle" coords="100,50,50" href="" title="1" alt="1" onMouseOver="$('#Image1').mapster('highlight','1')" onMouseOut="$('#Image1').mapster('highlight',false)" /&gt;
      &lt;area shape="circle" coords="200,100,50" href="" title="2" alt="2" onMouseOver="$('#Image1').mapster('highlight','2')" onMouseOut="$('#Image1').mapster('highlight',false)" /&gt;
      &lt;area shape="circle" coords="300,150,50" href="" title="3" alt="3" onMouseOver="$('#Image1').mapster('highlight','3')" onMouseOut="$('#Image1').mapster('highlight',false)" /&gt;
      &lt;area shape="circle" coords="400,200,50" href="" title="4" alt="4" onMouseOver="$('#Image1').mapster('highlight','4')" onMouseOut="$('#Image1').mapster('highlight',false)" /&gt;
      &lt;area shape="circle" coords="500,250,50" href="" title="5" alt="5" onMouseOver="$('#Image1').mapster('highlight','5')" onMouseOut="$('#Image1').mapster('highlight',false)" /&gt;
  &lt;/map&gt;
  
  &lt;img id="Image2" src="bicycleparts.png" usemap="#ImageMap2" /&gt;
  
  &lt;map name="ImageMap2" id="ImageMap2"&gt;
      &lt;area shape="circle" coords="100,50,50" href="" title="1" alt="1"/&gt;
      &lt;area shape="circle" coords="200,100,50" href="" title="2" alt="2"/&gt;
      &lt;area shape="circle" coords="300,150,50" href="" title="3" alt="3"/&gt;
      &lt;area shape="circle" coords="400,200,50" href="" title="4" alt="4"/&gt;
      &lt;area shape="circle" coords="500,250,50" href="" title="5" alt="5"/&gt;
  &lt;/map&gt;
  </code></pre>