Javascript Array со ссылками

Question

Я использую массив javascript, чтобы поменять изображения и вести себя как слайд-шоу.Я хочу применить карту изображений к каждому изображению и ссылаться на определенную страницу при нажатии.

Мне нужно кодировать горячую точку карты изображений, охватывающую прямоугольник от (24 247) до (174 284), которая становится ссылкой.Но мне нужно, чтобы каждое изображение ссылалось на отдельную страницу (местоположение горячей точки остается неизменным на каждом изображении.) Как мне запрограммировать это так, чтобы при изменении каждого изображения в слайд-шоу оно связывалось с другой страницей?

Вот кодирование: в разделе заголовка (файл js указан ниже):

<style> #Slideshow1 img {height:356px; width:912px}</style>
<script type="text/javascript" src="js/slideshowmerge.js"></script>

в разделе HTML для размещения массива:

<div class="box_broadstyle">
<script>

  var imgArray = new Array();
  imgArray[0] = "images2/slide_pics/full/ashley.png"; 
  imgArray[1] = "images2/slide_pics/full/auburn.png"; 
  imgArray[2] = "images2/slide_pics/full/brooklyn.png";
  imgArray[3] = "images2/slide_pics/full/cobane.png";
  imgArray[4] = "images2/slide_pics/full/giddeon.png";
  imgArray[5] = "images2/slide_pics/full/hartford.png";
  imgArray[6] = "images2/slide_pics/full/saratoga.png";
  imgArray[7] = "images2/slide_pics/full/seabrook.png";
  imgArray[8] = "images2/slide_pics/full/spring.png";
  slideshowMerge('Slideshow1','',imgArray,20,5000);

</script><
    </div>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ `

Slideshowmerge.js, перечисленные здесь:

//=======================
//
// Merging Image Slideshow
//
//
//=======================

var slideshowMergeAnimate = new Array();
var slideshowMergeTimer   = new Array();
var slideshowMergeCount   = new Array();
var slideshowMergeImages  = new Array();

//======================

function slideshowMerge(id,cl,imageArray,fadeInterval,holdTime)
{

  for(i=0;i<imageArray.length;i++)
  {
    var imgLoad = new Image();
    imgLoad.src = imageArray[i];
  }

  if(cl)
    cl = ' class="'+cl+'"';

  document.write('<div id="'+id+'"'+cl+' style="position:relative">');
  document.write('<img id="'+id+'img1" style="position:absolute; top:0px; left:0px;" onload="slideshowMergeRun(\''+id+'\')"/>');
  document.write('<img id="'+id+'img2" style="position:absolute; top:0px; left:0px;display:none;"/></div>');

  slideshowMergeCount[id]   = 0;
  slideshowMergeImages[id]  = imageArray;
  slideshowMergeAnimate[id] = 'run';
  slideshowMergeTimer[id]   = setInterval('slideshowMergeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);

}

//======================

function slideshowMergeAnimation(id,holdTime)
{
  if(slideshowMergeAnimate[id]=='run')
  {
    var obj1 = document.getElementById(id+'img1');
    var obj2 = document.getElementById(id+'img2');

    var opa  = slideshowMergeCount[id]%100;

    if(opa==0)
    {  
      if(obj1.src)
      {
        slideshowMergeAnimate[id] = 'hold';
        setTimeout('slideshowMergeRun(\''+id+'\')',holdTime);
        obj2.src = obj1.src;
        obj2.style.display = 'block';
      }
    }
    else if(opa==1)
    {
      slideshowMergeAnimate[id] = 'load';
      obj1.src = slideshowMergeImages[id][Math.floor(slideshowMergeCount[id]/100)%slideshowMergeImages[id].length];
    }

    obj1.style.opacity = (opa/100).toString();
    obj1.style.filter  = "alpha(opacity="+opa.toString()+")";
    obj2.style.opacity = ((100-opa)/100).toString();
    obj2.style.filter  = "alpha(opacity="+(100-opa).toString()+")";

    slideshowMergeCount[id]++;

    if(slideshowMergeCount[id]==(slideshowMergeImages[id].length*100))
      slideshowMergeCount[id]=0;
  }
}

//======================

function slideshowMergeRun(id)
{
  slideshowMergeAnimate[id] = 'run';
}

//======================