1

I have a javascript slideshow with image maps associated with each of the images. See example here.

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 (see here), but not when the images are inserted by the javascript (as in the first example).

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

HTML

<div id="gallery">
    <div id="imagearea">
        <div id="image">
            <a href="javascript:slideShow.nav(-1)" class="imgnav" id="previmg"></a>
            <a href="javascript:slideShow.nav(1)" class="imgnav" id="nextimg"></a>
            <?php include("../Images/Slides/Dog/4mmCSMaps.php"); ?>
        </div>
    </div>
    <div id="thumbwrapper">
        <div id="thumbarea">
            <ul id="thumbs"> 
                <?php include("../PHP/Slideshows/Dog4mmCS.php"); ?>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
    var imgid = 'image';
    var imgdir = '../Images/Slides/Dog/4mm/Transverse';
    var imgext = '.jpg';
    var thumbid = 'thumbs';
    var auto = false;
    var autodelay = 5;
    </script>
    <script src="/CSS-JS/SlideShow_Dog.js" type="text/javascript"></script>

SlideShow JS:

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<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)<=ss){
                    this.cncl(ta.id); ta.style.left='-'+l+'px';
                }else{ta.style.left=left-ss+'px'}
            }else{
                if(Math.abs(left)-l<=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<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>=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<=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>bxs&&xp<bxe&&yp>ys&&yp<ye){
                slideShow.scrl(-1);
            }else if(xp>fxs&&xp<fxe&&yp>ys&&yp<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()};

Any thoughts?

Tsentralka
  • 33
  • 6

0 Answers0