Image Swap, how to add fade?
Hello, I would like to modify an old mulit-image-swap script by adding a fade effect when the images swap, see:http://www.mhunterj.com
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[*/
#grabs {
position:relative; left:179px; top:-101px; z-index:4; height:163px; width:218px;
}
#grabs IMG{
position:absolute; left:0px; top:0px;height:163px; width:218px;
}
#description {
position:relative; left:89px; top:-73px; z-index:4; height:226px; width:198px;
}
#description IMG{
position:absolute; left:0px; top:0px;0 height:226px; width:198px;
}
/*]]>*/
</style></head>
<body bgcolor="white" marginheight="0" marginwidth="0" leftmargin="0"
rightmargin="0" topmargin="0" bottommargin="0" link="#C0C0C0" alink="red" vlink="#C0C0C0">
<center>
<br><BR><br>
<table border="0" cellspacing="0" cellpadding="0" width="847" height="515" background="bg-box-trans.gif">
<tr>
<td width="339" height="515">
<font size="2" face="arial" color="#C0C0C0">
<div id="links-external" style="position:relative; left:-20px; top:52px; z-index:4; width:90; height:150;">
<a href="http://www.a-linha.org" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',0);zxcFadeSlideShow.GoTo('description',0);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);zxcFadeSlideShow.GoTo('description',0);" >Linha</a><br>
<a href="http://www.bendpress.com" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',1);zxcFadeSlideShow.GoTo('description',1);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);zxcFadeSlideShow.GoTo('description',0);" >BendPress</a><br>
<a href="http://www.thelandofplenty.org" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',2);zxcFadeSlideShow.GoTo('description',2);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);zxcFadeSlideShow.GoTo('description',0);" >LandofPlenty</a><br>
<a HREF="http://www.flybar.com" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',3);zxcFadeSlideShow.GoTo('description',3);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);zxcFadeSlideShow.GoTo('description',0);" >Flybar</a><br>
</div></font>
<div id="grabs" >
<img src="http://www.mhunterj.com/grab-ziemba.gif" />
<img src="http://www.mhunterj.com/grab-linha.gif" />
<img src="http://www.mhunterj.com/grab-bendpress.gif" />
<img src="http://www.mhunterj.com/grab-landofplenty.gif" />
</div>
<div id="description" style="position:relative; left:89px; top:-73px; z-index:4; height:226; width:198;">
<img src="http://www.mhunterj.com/txt-intro.gif" />
<img src="http://www.mhunterj.com/txt-linha.gif" />
<img src="http://www.mhunterj.com/txt-bendpress.gif" />
<img src="http://www.mhunterj.com/txt-landofplenty.gif" />
</div>
</td>
<td width="508" height="515" align="center">
</td></tr>
</table>
</center>
<script type="text/javascript">
/*<![CDATA[*/
// Fade. (15-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcFadeSlideShow={
init:function(id,ms){
var p=document.getElementById(id),imgs=p.getElementsByTagName('IMG'),ms=typeof(ms)=='number'?ms:1000,ary=[],z0=0;
for (;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.zIndex=z0>0?'0':'1';
imgs[z0].style.left='0px';
imgs[z0].style.top='0px';
this.opac(imgs[z0],z0>0?0:100);
ary.push([imgs[z0],z0>0?0:100]);
}
this['zxc'+id]={
id:id,
ary:ary,
ms:ms,
cnt:0
}
},
GoTo:function(id,nu){
var o=this['zxc'+id];
if (o&&o.ary[nu]&&nu!=o.cnt){
o.ary[o.cnt][0].style.zIndex='0';
clearTimeout(o['dly'+o.cnt]);
this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms,'dly'+o.cnt);
o.ary[nu][0].style.zIndex='1';
clearTimeout(o['dly'+nu]);
this.animate(o,o.ary[nu],o.ary[nu][1],100,new Date(),o.ms,'dly'+nu);
o.cnt=nu;
}
},
animate:function(o,ary,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
this.opac(ary[0],now);
ary[1]=now;
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,to); },10);
}
},
opac:function(ob,now){
ob.style.filter='alpha(opacity='+now+')';
ob.style.opacity=ob.style.MozOpacity=ob.style.WebkitOpacity=ob.style.KhtmlOpacity=now/100-.001;
}
}
zxcFadeSlideShow.init('grabs',1000);
zxcFadeSlideShow.init('description',1000);
/*]]>*/
</script>
</body>
</html>
Thank you, fade effect working -
Very clever solution, the fade in/out on mouseover effect seems to be working even on multiple image swaps on same page. thank you!
Make imageswap stretchy to fill screen
The imageswap with fade effect is now working, thanks to the code below...but is there any way to make the image size stretch to fill the screen? It is currently contained in a table. The image swap contains width and height parameters so I dont know how to set those to automatically resize for larger browser windows:www.mhunterj.com
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<style type="text/css">
/* control size of image swap */
/*<![CDATA[*/
#grabs {
position:relative; z-index:4; display:block; width: 900px; height: 598px;
}
#grabs IMG{
position:relative; left:0px; top:0px; z-index:4; display:block; width: 900px; height: 598px;
}
/*]]>*/
/* css for vertical menu */
#vertmenu {
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}
#vertmenu h1 {
font-family: 'Arimo', sans-serif;
display: block;
background-color: none;
font-size: 200%;
padding: 3px 0 5px 3px;
border: 0px solid #000000;
color: #231f20;
margin: 0px;
letter-spacing: -0.1em;
}
#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
display: block;
border-bottom: 1px dashed #ececec;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #888888;
width:160px;
font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
font-size:80%;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #231f20;
background-color: none;
}
</style>
</head>
<body>
<center>
<table border="1" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top">
<div id="vertmenu">
<h1>Top Shots</h1>
<ul>
<li><a href="/Travel/Paris-2012/24060226_6RhFFP" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',1);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="1">Travels</a></li>
<li><a href="/Travel/London-2012/24047605_8PftST" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',2);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="2">Mountains</a></li>
<li><a href="/Travel/Kauai-50/24136577_89HSSC" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',3);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="3">Oceans</a></li>
</ul>
<BR><BR>
<h1>Travel</h1>
<ul>
<li><a href="/Travel/Paris-2012/24060226_6RhFFP" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',1);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="1">Paris</a></li>
<li><a href="/Travel/London-2012/24047605_8PftST" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',2);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="2">London</a></li>
<li><a href="/Travel/Kauai-50/24136577_89HSSC" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',3);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="3">Kauai</a></li>
</ul>
<BR><BR>
<h1>Events</h1>
<ul>
<li><a href="/Events/MrNewport-2012/24139066_7cSRm8" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',1);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="1">Mr.Newport</a></li>
<li><a href="/Events/Kentucky-Wedding/24140182_m2Fv2g" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',2);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="2">Kentucky Wedding</a></li>
<li><a href="#" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',3);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="3">Engagement</a></li>
</ul>
<BR><BR>
<h1>Family</h1>
<ul>
<li><a href="/FriendsnFamily/Lake-Geneva-2012/23958612_d6j7PR" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',1);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="1">Lake Geneva</a></li>
<li><a href="#" TARGET="_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',2);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="2">Colorado</a></li>
<li><a href="#" TARGET=_BLANK" onmouseover="zxcFadeSlideShow.GoTo('grabs',3);" onmouseout="zxcFadeSlideShow.GoTo('grabs',0);" STYLE="text-decoration: none" tabindex="3">Kentucky</a></li>
</ul>
</div>
</td>
<td id="grabs">
<img src="http://www.matthewhunterjones.com/Travel/Kauai-50/i-RrzFGB6/0/X2/DSC0626-X2.jpg" border="1" />
<img src="http://www.matthewhunterjones.com/Travel/Paris-2012/i-5fBrnFf/0/X2/DSC0223-X2.jpg" border="1" />
<img src="http://www.matthewhunterjones.com/Travel/London-2012/i-wcLJxcP/1/X2/DSC0241-X2.jpg" border="1" />
<img src="http://www.matthewhunterjones.com/Travel/Kauai-50/i-zWnQXDG/0/X2/DSC0089-X2.jpg" border="1" />
</td></tr></table></center>
<script type="text/javascript">
/*<![CDATA[*/
// Fade. (15-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcFadeSlideShow={
init:function(id,ms){
var p=document.getElementById(id),imgs=p.getElementsByTagName('IMG'),ms=typeof(ms)=='number'?ms:1000,ary=[],img=new Image(),z0=0;
img.src=imgs[z0].src;
for (;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.zIndex=z0>0?'0':'1';
imgs[z0].style.left='0px';
imgs[z0].style.top='0px';
imgs[z0].style.width='100%';
this.opac(imgs[z0],z0>0?0:100);
ary.push([imgs[z0],z0>0?0:100]);
}
this['zxc'+id]={
id:id,
img:img,
ary:ary,
ms:ms,
cnt:0
}
this.addevt(window,'resize','resize',id);
this.resize(id);
},
GoTo:function(id,nu){
var o=this['zxc'+id];
if (o&&o.ary[nu]&&nu!=o.cnt){
o.ary[o.cnt][0].style.zIndex='0';
clearTimeout(o['dly'+o.cnt]);
this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms,'dly'+o.cnt);
o.ary[nu][0].style.zIndex='1';
clearTimeout(o['dly'+nu]);
this.animate(o,o.ary[nu],o.ary[nu][1],100,new Date(),o.ms,'dly'+nu);
o.cnt=nu;
}
},
resize:function(id){
var oop=this,o=this['zxc'+id],z0=0;
if (o.img.width<40){
o.to=setTimeout(function(){ oop.resize(id); },100);
}
else {
for (;z0<o.ary.length;z0++){
o.ary[z0][0].style.height=Math.max(o.ary[z0][0].width*o.img.height/o.img.width,100)+'px';
o.ary[z0][0].style.top=(o.ary[z0][0].parentNode.offsetHeight-o.ary[z0][0].height)/2+'px';
}
}
},
animate:function(o,ary,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
this.opac(ary[0],now);
ary[1]=now;
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,to); },10);
}
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
opac:function(ob,now){
ob.style.filter='alpha(opacity='+now+')';
ob.style.opacity=ob.style.MozOpacity=ob.style.WebkitOpacity=ob.style.KhtmlOpacity=now/100-.001;
}
}
zxcFadeSlideShow.init('grabs',1000);
/*]]>*/
</script>
</body>
</html>
Table Resizes, Image Swap does not, modification?
Hello and Thank you - I posted your latest script edit (from above) at www.mhunterj.com
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Bookmarks