вот получился такой код..далее косметика и нахождение той же ноты на других струнах.
Может если будут какие-то поправки по модернизации кода,дабы привести его к более изящному виду,то буду очень рад выслушать.
var oktava= [" малой", " первой", " второй", " третьей"];
var note= [["e",0],["f",1],["g",2],["a",2],["b",2],["c",1],["d",2]];
var oktindex=2;
var pozic = document.getElementById('pozic');
//обработка струны
lad=0;
for(var i=0;i<note.length;i++){
if(note[i][0]==id)break;
lad += note[i+1][1];
}
// поправка на октавы
old=oktindex;//делаем бекап октавы
if(i>=5 && oktindex>0)oktindex--;
kr=oktindex*12;
valton = lad+kr;
oktindex=old;
//нахождение минимальной струны
if(valton>=24){strun="первая";valton -= 24}
else if(valton>=19 && valton<24){strun="вторая";valton -= 19}
// и так далее
pozic.innerHTML = "это "+strun+" струна, "+valton+" лад";
<h3>Апликатор</h3>
<p><span id="note">Ми</span><span id="oktava">второй</span> октавы</p>
<div>
<span><img id="a" src="css/images/bullet.gif" alt="Ля" width="513" height="96" border="0" /></span>
<span><img id="b" src="css/images/bullet.gif" alt="Си" width="513" height="96" border="0" /></span>
<span><img id="c" src="css/images/bullet.gif" alt="До" width="513" height="96" border="0" /></span>
<span><img id="d" src="css/images/bullet.gif" alt="Ре" width="513" height="96" border="0" /></span>
<span><img id="e" src="css/images/bullet.gif" alt="Ми" width="513" height="96" border="0" /></span>
<span><img id="f" src="css/images/bullet.gif" alt="Фа" width="513" height="96" border="0" /></span>
<span><img id="g" src="css/images/bullet.gif" alt="Соль" width="513" height="96" border="0" /></span>
<span><img id="h" src="css/images/bullet.gif" alt="Ля" width="513" height="96" border="0" /></span>
</div>
<p id="pozic">Первая открытая</p>
<br>