带有链接的 Javascript 数组

Question

我正在使用 JavaScript 数组来交换图像并像幻灯片放映一样。我希望将图像映射应用于每个图像，并在单击时链接到特定页面。

我需要编码一个图像地图热点，覆盖从 (24,247) 到 (174,284) 的矩形成为链接。但我需要每个图像链接到不同的页面（每个图像上的热点位置保持相同。）如何编程，以便当幻灯片放映中的每个图像发生变化时，它链接到不同的页面？

这是涉及的编码： 在 Head 部分（下面列出的 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';
}

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