title: Incorporating Image Mapster with JS Slideshow
body: <p>I have a javascript slideshow with image maps associated with each of the images. See example <a href="http://www.discoverdevelopment.com/PhP/SlidesDog4mmCSTest.php" rel="nofollow">here</a>.</p>
  
  <p>I would like to incorporate the jquery plugin, ImageMapster, to enhance the usability of the image maps. I can get the ImageMapster functions to work when the image is provided directly in the HTML (<a href="http://www.discoverdevelopment.com/php/SlidesDog4mmCSTest2.php" rel="nofollow">see here</a>), but not when the images are inserted by the javascript (as in the first example).</p>
  
  <p>I'm guessing I would need to embed the imagemapster script into the slideshow script so that it is called each time a new image is called. Unfortunately, I'm not sure how to do this. Here is the relevant html and JS</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="gallery"&gt;
      &lt;div id="imagearea"&gt;
          &lt;div id="image"&gt;
              &lt;a href="javascript:slideShow.nav(-1)" class="imgnav" id="previmg"&gt;&lt;/a&gt;
              &lt;a href="javascript:slideShow.nav(1)" class="imgnav" id="nextimg"&gt;&lt;/a&gt;
              &lt;?php include("../Images/Slides/Dog/4mmCSMaps.php"); ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="thumbwrapper"&gt;
          &lt;div id="thumbarea"&gt;
              &lt;ul id="thumbs"&gt; 
                  &lt;?php include("../PHP/Slideshows/Dog4mmCS.php"); ?&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
      var imgid = 'image';
      var imgdir = '../Images/Slides/Dog/4mm/Transverse';
      var imgext = '.jpg';
      var thumbid = 'thumbs';
      var auto = false;
      var autodelay = 5;
      &lt;/script&gt;
      &lt;script src="/CSS-JS/SlideShow_Dog.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>  </p>
  
  <p>SlideShow JS:</p>
  
  <pre><code>var slideShow=function(){
      var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
      ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
      t=ta.getElementsByTagName('li'); ie=document.all?true:false;
      st=3; ss=10; ft=10; fs=5; xp,yp=0;
      return{
          init:function(){
              document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
              ys=this.toppos(ta); ye=ys+ta.offsetHeight;
              len=t.length;tar=[];
              for(i=0;i&lt;len;i++){
                  var id=t[i].value; tar[i]=id;
                  t[i].onclick=new Function("slideShow.getimg('"+id+"')");
                  if(i==0){this.getimg(id)}
              }
              tarl=tar.length;
          },
          scrl:function(d){
              clearInterval(ta.timer);
              var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
              ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
          },
          mv:function(d,l){
              ta.style.left=ta.style.left||'0px';
              var left=ta.style.left.replace('px','');
              if(d==1){
                  if(l-Math.abs(left)&lt;=ss){
                      this.cncl(ta.id); ta.style.left='-'+l+'px';
                  }else{ta.style.left=left-ss+'px'}
              }else{
                  if(Math.abs(left)-l&lt;=ss){
                      this.cncl(ta.id); ta.style.left=l+'px';
                  }else{ta.style.left=parseInt(left)+ss+'px'}
              }
          },
          cncl:function(){clearTimeout(ta.timer)},//this function causes the scrolling to stop when mouse leaves scrolling area
          getimg:function(id){
              if(auto){clearTimeout(ia.timer)}
              if(ci!=null){
                  var ts,tsl,x;
                  ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
                  for(x;x&lt;tsl;x++){
                      if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
                  }
              }
              if(!document.getElementById(id)){
                  var i=document.createElement('img');
                  ia.appendChild(i);
                  i.id=id; i.av=0; i.style.opacity=0;
                  i.style.filter='alpha(opacity=0)';
                  i.src=imgdir+'/'+id+imgext;
                  i.useMap='#Map'+id;
              }else{
                  i=document.getElementById(id); clearInterval(i.timer);
              }
              i.timer=setInterval(function(){slideShow.fdin(i)},fs);
          },
          nav:function(d){
              var c=0;
              for(key in tar){if(tar[key]==ci.id){c=key}}
              if(tar[parseInt(c)+d]){
                  this.getimg(tar[parseInt(c)+d]);
              }else{
                  if(d==1){
                      this.getimg(tar[0]);
                  }else{this.getimg(tar[tarl-1])}
              }
          },
          auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
          fdin:function(i){
              if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
              if(i.av&gt;=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
          },
          fdout:function(i){
              i.av=i.av-fs; i.style.opacity=i.av/100;
              i.style.filter='alpha(opacity='+i.av+')';
              if(i.av&lt;=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
          },
          lim:function(){
              var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4; 
              bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
          },
          pos:function(e){
              xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX; 
              yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
              if(xp&gt;bxs&amp;&amp;xp&lt;bxe&amp;&amp;yp&gt;ys&amp;&amp;yp&lt;ye){
                  slideShow.scrl(-1);
              }else if(xp&gt;fxs&amp;&amp;xp&lt;fxe&amp;&amp;yp&gt;ys&amp;&amp;yp&lt;ye){
                  slideShow.scrl(1);
              }else{slideShow.cncl()}
          },
          leftpos:function(t){
              var l=0;
              if(t.offsetParent){
                  while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
              }else if(t.x){l+=t.x}
              return l;
          },
          toppos:function(t){
              var p=0;
              if(t.offsetParent){
                  while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
              }else if(t.y){p+=t.y}
              return p;
          }
      };
  }();
  
  window.onload=function(){slideShow.init(); slideShow.lim()};
  </code></pre>
  
  <p>Any thoughts?</p>