I always find it's easier to learn a new technology if you have a use for it. So, when I learned Perl and CGI (both together), I wrote up a program to automate the docs library I was in charge of at ECN.
So I put together a design as close as I could with those tools to a maple Telecaster neck. Black position dots and frets. and strings.
Then I put together functions to put dots down where scale notes and chord notes should go, so I could see and then learn scales and chords up and down the neck.
Call it the Guitar Tool.
But it has issues.
It doesn't work in IE. Only Firefox and Safari. I would only use Firefox if I could get away with it. New job says no.
I know that IE works with SVGs now. Google
SVG image mapsand you'll see examples that work on IE. But mine doesn't.
BTW, I got a new job!
Also, it doesn't handle hovering. Or image maps. Or whatever technology you choose. I want to be able to mouseover a dot and have it proudly announce "C#!" or whatever note it might be.
If you have ideas or pointers on how to make any of this work, please comment.