PDA

View Full Version : Continuous Reel Slideshow - Image Mapping??



sphaler
11-29-2012, 10:13 PM
1) Script Title:
Continuous Reel Slideshow

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/reelslideshow.htm

3) Describe problem:
Is there anyway to image map the images in the slideshow? I am only using 4 images, but want to link 5 different parts of that one image? Is that possible to do with this code? Or is there a better code out there that I should be using?

Thanks!

vwphillips
11-30-2012, 05:15 PM
It would be difficult to modify that script.

but I have made this with the images defined in the HTML code so you can add image maps as required


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:absolute;left:100px;top:100px;width:220px;height:170px;border:solid red 1px;
}

#tst DIV{
width:220px;height:170px;background-Color:red;
}
.s{
width:220px;height:170px;float:left;
}

/*]]>*/
</style></head>

<body>
<div id="tst" >
<a href="#" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></a>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
</div>
<input id="b1" type="button" name="" value="Next" />
<input id="b2" type="button" name="" value="Pevious" />
<input type="button" name="" value="GoTo 0" onmouseup="zxcStepCarousel.GoTo('tst',0);"/>
<input type="button" name="" value="GoTo 1" onmouseup="zxcStepCarousel.GoTo('tst',1);"/>
<input type="button" name="" value="GoTo 2" onmouseup="zxcStepCarousel.GoTo('tst',2);"/>

<script type="text/javascript">
/*<![CDATA[*/
// Step Carousel (30-November-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

// The functional code size is 4.96K

var zxcStepCarousel={

init:function(o){
var obj=document.getElementById(o.ID),ld=o.LoadDuration;
if (obj){
var clds=obj.childNodes,iary=[],img,cnt=0,z0=0;
for (var z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
img=clds[z0].nodeName.toUpperCase()=='IMG'?clds[z0]:clds[z0].getElementsByTagName('IMG')[0];
if (img){
iary[cnt]=[clds[z0],img,new Image()];
iary[cnt][2].src=img.src;
cnt++;
}
}
}
o.obj=obj;
this.load(o,iary,new Date(),(typeof(ld)=='number'&&ld>0?ld:5)*1000);
}
},

load:function(o,iary,d,ms){
for (var oop=this,z0=0;z0<iary.length;z0++){
if (iary[z0][2].width<40&&new Date()-d<ms){
o.to=setTimeout(function(){ oop.load(o,iary,d,ms); },100);
return;
}
}
for (z0=0;z0<iary.length;z0++){
if (iary[z0][2].width<40){
o.obj.removeChild(iary[z0][0])
iary.splice(z0,1);
z0--;
}
}
var obj=o.obj,id=obj.id,mde=o.Mode,ms=o.SlideDuration,hold=o.HoldDelay,srt=o.AutoStart,ud=o.Direction,days=o.DaysPersistence,n=document.getElementById(o.NextID),b=d ocument.getElementById(o.BackID),w=this.int(obj,'width'),h=this.int(obj,'height'),mde=typeof(mde)=='string'&&mde.charAt(0)=='V'?['top','left',h]:['left','top',w],ms=typeof(ms)=='number'&&ms>20?ms:1000,days=typeof(days)=='number'?days:typeof(days)=='session'?'s':-1,nu=(this.cookie(id+'=')||1)*1,slide=document.createElement('DIV'),img,div,div0,ds=[],p,ary=[0,0],lgth,z2=0;;
obj.style.overflow='hidden';
document.body.appendChild(slide);
slide.style.position='absolute';
for (var z2=0;z2<iary.length;z2++){
img=iary[z2][1];
div=slide.cloneNode(false);
ds.push(div);
p=mde[2]*ds.length;
ary[ds.length]=p;
div.style[mde[0]]=p+'px';
div.style[mde[1]]='0px';
div.style.width=w+'px';
div.style.height=h+'px';
div.appendChild(iary[z2][0]);
slide.appendChild(div);
img.style.position='absolute';
img.style.left=(w-img.width)/2+'px';
img.style.top=(h-img.height)/2+'px';
}
p+=mde[2];
ary.push(p);
div0=ds[0].cloneNode(true);
div0.style[mde[0]]=p+'px';
slide.appendChild(div0);
div=div.cloneNode(true);
div.style[mde[0]]='0px';
slide.appendChild(div)
slide.style[mde[0]]=-ary[nu]+'px';
obj.appendChild(slide);
lgth=ary.length-1;
nu=ary[nu]?nu:1;
o=zxcStepCarousel['zxc'+id]={
id:id,
obj:obj,
mde:mde[0],
slide:slide,
ary:ary,
lgth:lgth,
mve:ary[lgth-1],
ms:ms,
hold:typeof(hold)=='number'?hold:ms*4,
ud:typeof(ud)=='number'&&ud<0?-1:1,
cnt:nu,
now:-ary[nu],
days:days
}
this.addevt(slide,'mouseover','Pause',id);
this.addevt(obj,'mouseout','Auto',id);
if (n){
this.addevt(n,'mouseup','Next',id,1);
}
if (b){
this.addevt(b,'mouseup','Next',id,-1);
}
if (typeof(srt)=='number'){
this.Auto(id,srt);
}
},

Next:function(id,ud){
var o=zxcStepCarousel['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
this.rotate(o,o.cnt+ud);
}
},

GoTo:function(id,nu){
var o=zxcStepCarousel['zxc'+id],nu=typeof(nu)=='number'?nu+1:-1;
if (o&&nu>0&&nu<o.lgth){
this.rotate(o,nu);
}
},

Auto:function(id,ms){
var oop=this,o=zxcStepCarousel['zxc'+id];
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||500);
}
},

Pause:function(id){
var o=zxcStepCarousel['zxc'+id];
if (o){
o.auto=false;
clearTimeout(o.to);
}
},

rotate:function(o,nu){
clearTimeout(o.to);
o.auto=nu===true;
nu=o.auto?o.cnt+o.ud:nu;
var now=o.now;
if (nu>o.lgth||nu<0){
now+=o.mve*(nu<0?-1:1);
nu=nu<0?o.lgth-2:2;
}
if (typeof(o.ary[nu])=='number'&&nu!=o.cnt){
clearTimeout(o.dly);
this.animate(o,now,-o.ary[nu],new Date(),o.ms);
o.cnt=nu;
document.cookie=o.id+'='+(nu==o.lgth?1:nu==0?lgth-1:nu)+';'+(typeof(o.days)=='number'?'expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/':'');
}
},

animate:function(o,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.now=now;
o.slide.style[o.mde]=now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else {
o.now=t;
o.slide.style[o.mde]=t+'px';
if (o.auto){
oop.Auto(o.id,o.hold);
}
}
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
},

int:function(o,p){
return parseInt(this.style(o,p));
},

style:function(o,p){
if (o.currentStyle){
return o.currentStyle[p.replace(/-/g,'')];
}
return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
},

cookie:function(nme){
var re=new RegExp(nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
}


}

zxcStepCarousel.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
SlideDuration:500, //(optional) the slide duration in milli seconds. (number, default = 1000)
HoldDelay:1500, //(optional) the auto rotate hold delay in milli seconds. (number, default = SlideDuration*4)
AutoStart:2000, //(optional) the autimatic auto rotate start delay in milli seconds. (number, default = no autimatic start)
Direction:1, //(optional) the slide direction, 1 = anti clockwise, -1 clockwise. (number, default = 1 = anti clockwise)
NextID:'b1', //(optional) the unique ID name of the element to rotate once anti clockwise. (string, default = no event added to an element)
BackID:'b2', //(optional) the unique ID name of the element to rotate once clockwise. (string, default = no event added to an element)
LoadDuration:2000, //(optional) the time allowed to load images in seconds. (number, default = 5)
DaysPersistence:1 //(optional) number = the number of days to restore the framed element. (number, default = no persistence)
//(optional) 'session' = the restore the last framed element for the session. (string, default = no persistence)
});
/*]]>*/
</script>
</body>

</html>