i have javascript that switches 2 different sized speaker images to make them appear to be "bumping". the code works just fine but now I am wanting an xhtml strict site which doesn't allow the name attribute for images. I am still very new to javascript and need some tutoring on how to change my script to the getelementbyId function. Thank you so much for the help.

Script=
var speak1Img = new Array(2);
speak1Img[0]="http://www.doneljortolian.com/images/Sp1-1.gif";
speak1Img[1]="http://www.doneljortolian.com/images/Sp1-2.gif";

var newSpeak1 = 0;
var totalSp1 = speak1Img.length;

function cycleSp1() {
newSpeak1++;
if (newSpeak1 == totalSp1) {
newSpeak1 = 0;
}
document.speak1.src=speak1Img[newSpeak1];
setTimeout("cycleSp1()", 1000);
}

var speak2Img = new Array(2);
speak2Img[0]="http://www.doneljortolian.com/images/Sp2-1.gif";
speak2Img[1]="http://www.doneljortolian.com/images/Sp2-2.gif";

var newSpeak2 = 0;
var totalSp2 = speak2Img.length;

function cycleSp2() {
newSpeak2++;
if (newSpeak2 == totalSp2) {
newSpeak2 = 0;
}
document.speak2.src=speak2Img[newSpeak2];
setTimeout("cycleSp2()", 800);
}

var speak3Img = new Array(2);
speak3Img[0]="http://www.doneljortolian.com/images/Sp3-1.gif";
speak3Img[1]="http://www.doneljortolian.com/images/Sp3-2.gif";

var newSpeak3 = 0;
var totalSp3 = speak3Img.length;

function cycleSp3() {
newSpeak3++;
if (newSpeak3 == totalSp3) {
newSpeak3 = 0;
}
document.speak3.src=speak3Img[newSpeak3];
setTimeout("cycleSp3()", 400);
}

var speak4Img = new Array(2);
speak4Img[0]="http://www.doneljortolian.com/images/Sp4-1.gif";
speak4Img[1]="http://www.doneljortolian.com/images/Sp4-2.gif";

var newSpeak4 = 0;
var totalSp4 = speak4Img.length;

function cycleSp4() {
newSpeak4++;
if (newSpeak4 == totalSp4) {
newSpeak4 = 0;
}
document.speak4.src=speak4Img[newSpeak4];
setTimeout("cycleSp4()", 200);
}

var speak5Img = new Array(2);
speak5Img[0]="http://www.doneljortolian.com/images/Sp1-1.gif";
speak5Img[1]="http://www.doneljortolian.com/images/Sp1-2.gif";

var newSpeak5 = 0;
var totalSp5 = speak5Img.length;

function cycleSp5() {
newSpeak5++;
if (newSpeak5 == totalSp5) {
newSpeak5 = 0;
}
document.speak5.src=speak5Img[newSpeak5];
setTimeout("cycleSp5()", 1000);
}

var speak6Img = new Array(2);
speak6Img[0]="http://www.doneljortolian.com/images/Sp3-1.gif";
speak6Img[1]="http://www.doneljortolian.com/images/Sp3-2.gif";

var newSpeak6 = 0;
var totalSp6 = speak6Img.length;

function cycleSp6() {
newSpeak6++;
if (newSpeak6 == totalSp6) {
newSpeak6 = 0;
}
document.speak6.src=speak6Img[newSpeak6];
setTimeout("cycleSp6()", 400);
}

var speak7Img = new Array(2);
speak7Img[0]="http://www.doneljortolian.com/images/Sp4-1.gif";
speak7Img[1]="http://www.doneljortolian.com/images/Sp4-2.gif";

var newSpeak7 = 0;
var totalSp7 = speak7Img.length;

function cycleSp7() {
newSpeak7++;
if (newSpeak7 == totalSp7) {
newSpeak7 = 0;
}
document.speak7.src=speak7Img[newSpeak7];
setTimeout("cycleSp7()", 200);
}

html=
<img id='sp1' name='speak1' src='images/Sp1-1.gif' alt='speaker' />
<img id='sp3' name='speak3' src='images/Sp3-1.gif' alt='speaker' />
<img id='sp4' name='speak4' src='images/Sp4-1.gif' alt='speaker' />
<img id='sp2' name='speak2' src='images/Sp2-1.gif' alt='speaker' />
<img id='sp7' name='speak7' src='images/Sp7-1.gif' alt='speaker' />
<img id='sp6' name='speak6' src='images/Sp6-1.gif' alt='speaker' />
<img id='sp5' name='speak5' src='images/Sp5-1.gif' alt='speaker' />