JS image toggle specific method of of with thumbnail version

  • 2020-03-29 23:41:25
  • OfStack


<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> Five screens with thumbnail slide switch code </title> 
<style> 
BODY {  
    FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY:  Song typeface ,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2  
}  
A {  
    TEXT-DECORATION: none  
}  
A:link {  
    COLOR: #505050; color1: #54564c  
}  
A:visited {  
    COLOR: #505050; color1: #54564c  
}  
A:hover {  
    COLOR: #d40005; TEXT-DECORATION: underline  
}  
A:active {  
    COLOR: #f30  
}  
IMG {  
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px  
}  
.box {  
    FLOAT: left; WIDTH: 472px  
}  
.box .boxpadding {  
    PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px  
}  
#Slide {  
    CLEAR: both; BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-BOTTOM: 6px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; WIDTH: 450px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 335px  
}  
#Slide A {  
    COLOR: #000  
}  
.img {  
    BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center  
}  
.boxpadding {  
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BACKGROUND: #f8f8f8; MARGIN-BOTTOM: 8px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid  
}  
 
.thumb_title {  
    MARGIN-TOP: 10px; BACKGROUND: #fff; FILTER: alpha(opacity=30); WIDTH: 450px; TEXT-INDENT: 10px; LINE-HEIGHT: 25px; POSITION: absolute; HEIGHT: 25px; -moz-opacity: 0.3  
}  
#Slide_Thumb {  
    MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute  
}  
.thumb_on {  
    DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer  
}  
.thumb_off {  
    DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer  
}  
.thumb_off {  
    FILTER: alpha(opacity=50); -moz-opacity: 0.5  
}  
.thumb_on {  
    FILTER: alpha(opacity=100); -moz-opacity: 1  
}  
.thumb_off IMG {  
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-TOP: 12px; BORDER-LEFT: #fff 1px solid; WIDTH: 75px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 56px  
}  
.thumb_on IMG {  
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 91px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 68px  
}  
</style> 
</head> 
<body> 
<table width="472" height="511" border="0" align="center" cellpadding="0" cellspacing="0"> 
  <tr> 
    <td width="472"><div class=box style="MARGIN-BOTTOM: 8px"> 
      <div class=boxpadding> 
        <div id=Slide> <a id=foclnk   
href="/" target=_blank> 
<img id=focpic style="FILTER: RevealTrans(duration=1;ransition=12); VISIBILITY: visible; POSITION: absolute; left:484; top:94"   
src="/jscss/demoimg/wall1.jpg" width="450" height="335" /></a> 
            <div class=thumb_title id=foctitle><a href="/"   
target=_blank> FIG. 1 </a></div> 
          <div id=Slide_Thumb> 
              <div class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a   
href="/" target=_blank><img alt=" Figure 2 " src="/jscss/demoimg/wall1.jpg" /></a></div> 
              <div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a   
href="/" target=_blank><img alt=" Figure 2 " src="/jscss/demoimg/wall2.jpg" /></a></div> 
              <div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a   
href="/" target=_blank><img alt=" FIG. 3 " src="/jscss/demoimg/wall3.jpg" /></a></div> 
              <div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a   
href="/" target=_blank><img alt=" FIG. 4 " src="/jscss/demoimg/wall4.jpg" /></a></div> 
              <div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a   
href="/" target=_blank><img alt=" Figure 5 " src="/jscss/demoimg/wall5.jpg" /></a></div> 
              <script language=javascript type=text/javascript> 
var picarry = {};  
var lnkarry = {};  
var ttlarry = {};  
picarry[0] = "//www.jb51.net/jscss/demoimg/wall1.jpg";  
lnkarry[0] = "/";  
ttlarry[0] = " FIG. 1 ";  
picarry[1] = "/jscss/demoimg/wall2.jpg";  
lnkarry[1] = "/";  
ttlarry[1] = " Figure 2 ";  
picarry[2] = "/jscss/demoimg/wall3.jpg";  
lnkarry[2] = "/";  
ttlarry[2] = " FIG. 3 ";  
picarry[3] = "/jscss/demoimg/wall4.jpg";  
lnkarry[3] = "/";  
ttlarry[3] = " FIG. 4 ";  
picarry[4] = "/jscss/demoimg/wall5.jpg";  
lnkarry[4] = "/";  
ttlarry[4] = " Figure 5 ";  
      </script> 
            </div> 
        </div> 
      </div> 
    </div></td> 
  </tr> 
</table> 
<div align="center"> 
<SCRIPT type=text/javascript> 
var currslid = 0;  
var slidint;  
function setfoc(id){  
    document.getElementById("focpic").src = picarry[id];  
    document.getElementById("foclnk").href = lnkarry[id];  
    document.getElementById("foctitle").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';  
    currslid = id;  
    for(i=0;i<5;i++){  
        document.getElementById("tmb"+i).className = "thumb_off";  
    };  
    document.getElementById("tmb"+id).className ="thumb_on";  
    focpic.style.visibility = "hidden";  
    focpic.filters[0].Apply();  
    if (focpic.style.visibility == "visible") {  
        focpic.style.visibility = "hidden";  
        focpic.filters.revealTrans.transition=23;  
    }  
    else {  
        focpic.style.visibility = "visible";  
        focpic.filters[0].transition=23;  
    }  
    focpic.filters[0].Play();  
    stopit();  
}  
 
function playnext(){  
    if(currslid==4){  
        currslid = 0;  
    }  
    else{  
        currslid++;  
    };  
    setfoc(currslid);  
    playit();  
}  
function playit(){  
    slidint = setTimeout(playnext,4500);  
}  
function stopit(){  
    clearTimeout(slidint);  
    }  
window.onload = function(){  
    playit();  
}</SCRIPT> 
</div> 
</body> 
</html>   


Related articles: