title: Diagram with Rollovers
body: <p>I am building a responsive site with WordPress and I need to make an interactive diagram with 3 hotspots: each of the 3 icons in the corners of the triangle <a href="http://i118.photobucket.com/albums/o104/rorobop/About-base.png" rel="nofollow">here</a> will be a different hotspot...</p>
  
  <p>When the blue is rolled over, blue arrows &amp; text will appear, partly obscuring other parts of the triangle - as seen <a href="http://i118.photobucket.com/albums/o104/rorobop/About-blue.png" rel="nofollow">here</a>.
  Likewise, when the green is rolled over, green arrows &amp; text are shown.
  And finally, when the pink is rolled over, pink arrows &amp; text are shown.</p>
  
  <p>I have never tried CSS sprites before but I understand that they're better than the old javascript onMouseOut / onMouseOver method. Can anyone please advise me how I may best go about making this interactive diagram? I'm not very sophisticated at coding. Any assistance would be greatly appreciated.</p>
  
  <p>Thanks!</p>