title: Changing opacity on Mouseover
body: <p>The ultimate goal of my project is to make my image of circle chart interactive on mouseovers. I want the pieces of the circle to change opacity to .5 (from 1) when the user hovers them. I have an image of the chart but I'm not sure how to make areas of one single image change opacity on hover. I have tried several things:</p>
  
  <ul>
  <li>I image mapped the chart with each piece in its own map, but I wasn't sure how to change opacity of an area of one single image (css)(if its even possible)</li>
  <li>My second approach was that i sliced the chart up into individual pieces and made their opacity .5 and saved them all separately. Then, I image mapped the single image of the chart and tried to load the individual piece on hover (css)</li>
  <li>My final approach was saving each piece of the chart as individual images and when the image is hovered, change the opacity to .5 with css. This works perfectly except i am not sure how to position the pieces to form a perfect circle in dreamweaver. </li>
  </ul>
  
  <p>Any direction or advise is greatly appreciated. I am willing to learn javascript or jquery to help get this done. </p>
  
  <p>Thank you</p>
  
  <p><strong>EDIT</strong> Image of the chart is now attached</p>
  
  <p><a href="http://i.stack.imgur.com/KwIfY.jpg" rel="nofollow">http://i.stack.imgur.com/KwIfY.jpg</a></p>