title: Javascript Array with Links
body: <p>I am using an javascript array to swap images and act like a slide show.  I am looking to apply an image map to each image and link to a specific page when clicked.</p>
  
  <p>I need to code an image map hot spot covering a rectangle from (24,247) to (174,284) becomes a link.  But I need each image to link to a different page (the hotspot location remains the same on every image.)   <strong>How do I program this so when each image changes in the slide show it links to a different page?</strong></p>
  
  <p>Here is the coding involved:
  in Head Section  (js file listed far below):</p>
  
  <pre><code>&lt;style&gt; #Slideshow1 img {height:356px; width:912px}&lt;/style&gt;
  &lt;script type="text/javascript" src="js/slideshowmerge.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In the HTML Section to place array:</p>
  
  <pre><code>&lt;div class="box_broadstyle"&gt;
  &lt;script&gt;
  
    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);
  
  &lt;/script&gt;&lt;
      &lt;/div&gt;
  </code></pre>
  
  <p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`</p>
  
  <p>Slideshowmerge.js listed here:</p>
  
  <pre><code>//=======================
  //
  // 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&lt;imageArray.length;i++)
    {
      var imgLoad = new Image();
      imgLoad.src = imageArray[i];
    }
  
    if(cl)
      cl = ' class="'+cl+'"';
  
    document.write('&lt;div id="'+id+'"'+cl+' style="position:relative"&gt;');
    document.write('&lt;img id="'+id+'img1" style="position:absolute; top:0px; left:0px;" onload="slideshowMergeRun(\''+id+'\')"/&gt;');
    document.write('&lt;img id="'+id+'img2" style="position:absolute; top:0px; left:0px;display:none;"/&gt;&lt;/div&gt;');
  
    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';
  }
  
  //======================
  </code></pre>