Code:
<!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[*/
#slideshow {
position:absolute;left:100px;top:100px;width:350px;height:263px;background-Color:#FFCC66;
}
.page {
position:absolute;left:0px;top:0px;width:350px;height:263px;background-Color:#FFFFCC;
}
.page IMG {
position:absolute;left:0px;top:-300px;width:350px;height:263px;border-Width:0px;
}
.page0 {
background-Image:url(http://www.vicsjavascripts.org/StdImages/0.gif);
}
.page1 {
background-Image:url(http://www.vicsjavascripts.org/StdImages/1.gif);
}
.page2 {
background-Image:url(http://www.vicsjavascripts.org/StdImages/2.gif);
}
#forward {
position:absolute;z-Index:10;left:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer;
}
#back {
position:absolute;z-Index:10;right:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer;
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="GoTo 0" onclick="zxcSlideShow.GoTo('slideshow',0);"/>
<input type="button" name="" value="GoTo 1" onclick="zxcSlideShow.GoTo('slideshow',1);"/>
<input type="button" name="" value="GoTo 2" onclick="zxcSlideShow.GoTo('slideshow',2);"/>
<div id="slideshow" >
<div class="page page0" >
page 0
<a href="http://www.vicsjavascripts.org/"><img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="img" /></a>
</div>
<div class="page page1" >
page 1
<img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="img" />
</div>
<div class="page page2" >
page 2
<img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="img" />
</div>
<div id="forward" ></div>
<div id="back" ></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Mouseover Fade Slide Show. (21-March-2014)
// by - Vic Phillips - http://www.vicsjavascripts.org/
var zxcSlideShow={
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(o.id);
if (o.a[n]&&n!=o.n){
o.ud=n>o.n?1:-1;
this.rotate(o,n);
}
}
},
Auto:function(id,ms){
var oop=this,o=this['zxc'+id];
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
init:function(o){
var id=o.ParentID,ms=o.FadeDuration,add=o.AddEvents,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),pgs=p?this.bycls(o.PageClass,p,'DIV'):[];
if (pgs[0]){
var n=0,add=add instanceof Array?add:[],i,z0=0,z1=0;
o.a=[]
for (;z0<pgs.length;z0++){
i=pgs[z0].getElementsByTagName('IMG')[0]||document.createElement('IMG');
i.style.top='-3000px';
pgs[z0].style.top=(z0!=n?-3000:0)+'px';
o.a[z0]=[[pgs[z0],z0!=n?0:100],[i,0]];
}
o.id=id;
o.n=n;
o.ud=1;
o.lgth=z0-1;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
this.addevt(p,'mouseover','mse',o,false);
this.addevt(p,'mouseout','mse',o,true);
for (;z1<add.length;z1++){
if (add[z1]&&add[z1][0]){
n=document.getElementById(add[z1][0]);
i=add[z1][1];
if (n&&this[add[z1][2]]){
this.addevt(n,i=='mouseup'||i=='mouseover'||i=='mouseout'||i=='mousedown'?i:'click',add[z1][2],o.id,add[z1][3]);
}
}
}
this['zxc'+id]=o;
typeof(s)=='number'&&s>20?this.Auto(id,s):null;
}
},
mse:function(o,ud){
ud===false?this.Pause(o.id):null;
this.animate(o,o.a[o.n][1],o.a[o.n][1][1],ud?0:100,new Date(),o.ms,ud?'hide':'');
o.a[o.n][1][0].style.top='0px';
},
rotate:function(o,a){
this.Pause(o.id);
this.mse(o,true);
o.auto=a===true;
var n=o.auto?o.n+o.ud:a;
n=n<0?o.lgth:n>o.lgth?0:n;
o.a[o.n][0][0].style.zIndex='0';
this.animate(o,o.a[o.n][0],o.a[o.n][0][1],0,new Date(),o.ms,'hide');
o.a[n][0][0].style.zIndex='1';
o.a[n][0][0].style.top='0px';
this.animate(o,o.a[n][0],o.a[n][0][1],100,new Date(),o.ms,'auto');
o.n=n;
},
animate:function(o,a,f,t,srt,mS,x){
clearTimeout(a[5]);
var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[1]=n;
oop.opc(a[0],a[1]);
}
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
}
else {
a[1]=t;
oop.opc(a[0],t);
x=='hide'?a[0].style.top='-3000px':null;
x=='auto'&&o.auto?oop.Auto(o.id,o.h):null;
}
},
opc:function zxcOpacity(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
bycls:function (n,o,t){
for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
if((' '+c[z0].className+' ').match(' '+n+' ')){
a.push(c[z0]);
}
}
return a;
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcSlideShow.init({
ParentID:'slideshow', // the unique ID name of the slide show parent DIV. (string)
PageClass:'page', // the common class name of the slide show pages. (string)
FadeDuration:1000, //(optional) the fade duration in milliseconds. (number, default = 1000)
AddEvents:[ //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls)
// field 0 = the unique ID name of the element.
// field 1 = the event type.
// field 2 = the script function name.
// field 3 = the control parameter to pass to the function.
['slideshow','mouseout','Auto'],
['forward','mouseup','Next',1],
['back','mouseup','Next',-1]
],
AutoHold:2000, //(optional) the auto rotation fade 'hold' delay in milli seconds. (number, default = FadeDuration*4)
AutoStart:2000 //(optional) the delay before starting auto rotation. (number, default = no auto start)
});
/*]]>*/
</script>
</body>
</html>
B&W to Color on MouseOver slideshow with links to pages for each picture HELP...
Reply With Quote
Bookmarks