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>---------.com | Open your shop user guide </title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" type="image/x-icon" href="favicon2.ico" />
<style type="text/css">
<!--
#wrapper {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #424851;
}
.background {
height: 662px;
width: 950px;
background-color: #2C2E37;
}
.navigation {
height: 475px;
width: 188px;
background-color: #000;
}
#navigation {
position:absolute;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/*<![CDATA[*/
.tstparent {
position:relative;left:11px;top:20px;width:994px;height:401px;
}
.button {
position:absolute;left:1px;top:447px;z-index:101;cursor:pointer;
}
#tst {
position:relative;left:0px;top:0px;width:994px;height:401px;
}
.maindiv {
}
.maindiv {
}
#tst IMG{
position:absolute;left:0px;top:50px;border-Width:0px;
}
/*]]>*/
-->
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// **** Functional Code(1.52K) - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
</head>
<body>
<div class="tstparent" >
<div><img src="http://----------.com/howtoopenashop.png" width="394" height="90" />
<div id="tst" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" usemap="#tstmap"/>
</div>
</div>
<img class="button" src="http://----------.com/previousbutton.png" id="previous" alt="previous" style="left:0px;" />
<img class="button" src="http://----------.com/nextbutton.png" id="next" alt="next" style="left:915px;" /></div>
<map id="map1" name="tstmap">
</map>
<script type="text/javascript">
/*<![CDATA[*/
// Image Map Slide Show (10-April-2011) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
function zxcMapSlideShow(o){
var oop=this,obj=document.getElementById(o.SlideShowID),map=document.getElementById(o.ImageMapID),mapimg=obj.getElementsByTagName('IMG')[0],iary=o.ImageArray,z0=0,z0a,img,ary=[],ms=o.SlideSpeed,but;
obj.style.overflow='hidden';
mapimg.style.zIndex='10';
for (;z0<iary.length;z0++){
img=document.createElement('IMG');
img.src=iary[z0][0];
img.style.position='absolute';
img.style.zIndex=z0>0?'0':'1';
img.style.left='0px';
img.style.top='0px';
img.style.width='100%';
img.style.height='100%';
obj.appendChild(img);
ary[z0]=[new zxcAnimate('left',img),[]];
for (z0a=0;z0a<iary[z0][1].length;z0a++){
ary[z0][1].push(iary[z0][1][z0a]);;
}
}
but=document.getElementById(o.Next);
if (but){
this.nxt=but;
but.onclick=function(){ oop.Next(1); }
}
but=document.getElementById(o.Back);
if (but){
this.bk=but;
but.onclick=function(){ oop.Next(-1); }
but.style.visibility='hidden';
}
this.sz=obj.offsetWidth+5;
this.ary=ary;
this.pre=ary[0];
this.lst=ary[0];
this.cnt=0;
this.ms=typeof(ms)=='number'?ms:1000;
this.map=map;
this.area(0);
}
zxcMapSlideShow.prototype={
Next:function(ud){
var ary=this.ary,cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=ary.length-1
cnt=Math.max(Math.min(cnt,lgth),0);
if (this.nxt){
this.nxt.style.visibility=cnt<lgth?'visible':'hidden';
}
if (this.bk){
this.bk.style.visibility=cnt>0?'visible':'hidden';
}
if (cnt!=this.cnt){
this.pre[0].obj.style.zIndex='0';
this.lst[0].obj.style.zIndex='1';
this.pre=this.lst;
ary[cnt][0].obj.style.zIndex='2';
ary[cnt][0].animate(this.sz*-ud,0,this.ms,[0,this.sz]);
this.lst=ary[cnt];
this.cnt=cnt;
this.area(cnt);
}
},
area:function(nu){
var ary=this.ary[nu],map=this.map,z0=0,area,lgth;
while (map.firstChild){
map.removeChild(map.firstChild);
}
for (;z0<ary[1].length;z0++){
area=document.createElement('AREA');
lgth=ary[1][z0][0].length;
area.shape=lgth==3?'circle':lgth==4?'rect':'poly';
area.coords=ary[1][z0][0];
if (ary[1][z0][1]){
area.href=ary[1][z0][1];
}
if (ary[1][z0][2]){
area.alt=ary[1][z0][2];
}
map.appendChild(area);
}
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
M1=new zxcMapSlideShow({
SlideShowID:'tst', // the unique ID name of the slide show parent node. (string)
ImageMapID:'map1', // the unique ID name of the image MAP. (string)
ImageArray:[ // an array defining the slide show images and image map data. (array)
// field 0 = the image src. (string)
// field 1 = an array of arrays defining the image map data. (array)
// field 0 = the image map area coordinates. (array)
// field 1 = the image map area link href. (string)
// field 2 = the image map area alt attribute value. (string)
['http://-------.com/shopfrontpage.png',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://-------.com/shopstep1.png',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://-------.com/shopstep2.png',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://-------.com/shopstep3.png',[[[241,195,21],'#','area4'],[[85,86,131,120],'#','area5']]],
['http://-------.com/shopstep4.png',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://-------.com/shopstep5.png',[[[241,195,21],'#','area6'],[[85,86,131,120],'#','area7']]]
],
SlideSpeed:0, //(optional) the animation speed in milli seconds. (number, default = 1000)
Next:'next', //(optional) the next button ID. (string, default = in line call)
Back:'previous' //(optional) the back button ID. (string, default = in line call)
});
/*]]>*/
</script></body>
</html>
Junior Coders
image slider button question
Posting Permissions
Reply With Quote
Bookmarks