Javascript error in IE, works on Firefox

[sunilaj]

Hi all,

I am in need of some help in debugging a javasript issue. Before I get to the problem, let me try and explain what I'm trying to accomplish using the script.

The concept is for a user to be able to click on image hotspots(next and previous) to change the current image. There are multiple images and so I setup the attributes of the new image similar to the original attributes of the first image and arm the onClick event of the area tag with the function loadImage.

I use javascript DOM modification to try and achieve this. The following script works perfectly on Firefox but gives me an "Invalid Argument" error on IE.

Here's the script.

images = new Array('N80KerinIntro.jpg', 'N80ConvPreview.jpg', 'N80WithExercise.jpg', 'N80WithGrammarText.jpg', 'N80WithLauraInstruction.jpg', 'N80WithTomGrammar.jpg', 'N80WithVocabulary.jpg');
var count = 0;
var maxCount = 6;
var next0 = new Object(); //Next button ID
next0.text = 'next';
var fpmap0 = new Object(); //Map ID
fpmap0.text = 'map';

function loadImage(button)
{
var buttonId = eval(button.id);

if(buttonId.text == 'next')
{
if((count+1) <= maxCount)
{
var oldImage = document.getElementById('image'+count);
var newImage = document.createElement('img');
newImage.setAttribute('id', 'image'+(count+1));
newImage.setAttribute('border', 0);
newImage.setAttribute('src', 'images2007/'+images[++count]);
newImage.setAttribute('width', 254);
newImage.setAttribute('height', 476);
var temp = '#FPMap'+(count+1);
newImage.setAttribute('usemap', temp);
document.getElementById('divide').replaceChild(new Image, oldImage);

var oldMap = document.getElementById('fpmap'+(count-1));
var newMap = document.createElement('map');
newMap.setAttribute('id', 'fpmap'+count);
newMap.setAttribute('name', 'FPMap'+(count+1));

var areaNext = document.createElement('area');
areaNext.setAttribute('id', 'next'+count);
areaNext.setAttribute('style', 'cursor:hand');
areaNext.setAttribute('shape', 'rect');
areaNext.setAttribute('coords', '158, 275, 202, 293');
areaNext.setAttribute('onclick', 'loadImage(this)');
areaNext.setAttribute('text', 'next');
areaNext.text = 'next';

var areaPrev = document.createElement('area');
areaPrev.setAttribute('id', 'prev'+count);
areaPrev.setAttribute('style', 'cursor:hand');
areaPrev.setAttribute('shape', 'rect');
areaPrev.setAttribute('coords', '38, 275, 85, 293');
areaPrev.setAttribute('onclick', 'loadImage(this)');

newMap.appendChild(areaNext);
newMap.appendChild(areaPrev);
document.getElementById('divide').replaceChild(new Map, oldMap);
}
}
}

Can anybody please help me identify the cause of the error?

Thanks in advance,
Sunil