/    Sign up×
Community /Pin to ProfileBookmark

image fade using a delay before the behaviour

Copy linkTweet thisAlerts:
Aug 05.2008

HI all this is my first post so bear with me.
Im trying to create a thumbnail gallery where as you mouse over the thumbnail it fades and the large image appears, then when you mouse out the large image fades and the thumbnail reappears. my problem is when you go from one thumbnail to another and it trys to fade out an image and fade in an image at the same time. all i want is to add a delay to the mouseover effect of 1sec giving it enough time to fade before the next one appears.
[URL=”http://www.eastwoodcook.com/testsite/cubes.html”]http://www.eastwoodcook.com/testsite/cubes.html[/URL] here is a link to what i have done so far ive only been playing with the first two thumbnails. any help advice greatly recieved.:o

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@PieceOruttauthorAug 05.2008 — Just thought i should post the code for my page up just in case it made things easier?

[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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="cubes.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#thumbs {
position:relative;
left:0px;
top:300px;
width:400px;
height:400px;
z-index:3;
}
#empty {
position:relative;
left:0px;
top:-100px;
width:400px;
height:400px;
z-index:2;
}
#largeim {
position:relative;
left:380px;
top:-820px;
width:600px;
height:550px;
z-index:1;
}
#fade {
position:relative;
left:380px;
top:-1370px;
width:600px;
height:550px;
z-index:4;
background-image: url(%20);
}
-->
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body class="oneColFixCtr" onload="MM_preloadImages('largeims/large1.jpg','largeims/large2.jpg','largeims/large3.jpg','largeims/large4.jpg','largeims/large5.jpg','thumbs/jpgs/fade.jpg')">




<div id="container">
<div id="mainContent">
<h1>&nbsp;</h1>
<div id="thumbs"><img src="thumbs/jpgs/thumb1.jpg" alt="thumb0" border="0" onmouseover="MM_effectAppearFade('fade', 1000, 100, 0, false);MM_effectAppearFade(this, 1000, 100, 0, false);MM_swapImage('largeimage','','largeims/large1.jpg',1)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false);MM_effectAppearFade('fade', 500, 0, 100, false)" /><img src="blocks/images/blocks_02.gif" alt="edge1" /><img src="blocks/images/blocks_03.gif" alt="edge2" width="98" height="101" /><br/>
<img src="thumbs/jpgs/thumb2.jpg" alt="thumb2" border="0" onmouseover="MM_swapImage('largeimage','','largeims/large2.jpg',1);MM_effectAppearFade(this, 1000, 100, 0, false);MM_effectAppearFade('fade', 1000, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false);MM_effectAppearFade('fade', 500, 0, 100, false)" /><img src="thumbs/jpgs/thumb3.jpg" alt="thumb3" width="100" height="100" onmouseover="MM_effectAppearFade(this, 1000, 100, 0, false);MM_swapImage('largeimage','','largeims/large3.jpg',1)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false);MM_swapImgRestore();MM_effectAppearFade(this, 1000, 0, 100, false)" /><img src="blocks/images/blocks_08.gif" alt="edge3" width="98" height="100" /><img src="blocks/images/blocks_09.gif" alt="edge4" width="101" height="100" /><br/>
<img src="thumbs/jpgs/thumb4.jpg" alt="thumb4" onmouseover="MM_effectAppearFade(this, 1000, 100, 0, false);MM_swapImage('largeimage','','largeims/large4.jpg',1)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false);MM_swapImgRestore()" /><img src="thumbs/jpgs/thumb5.jpg" alt="thumb5" width="100" height="100" onmouseover="MM_effectAppearFade(this, 1000, 100, 0, false);MM_swapImage('largeimage','','largeims/large5.jpg',1)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false);MM_swapImgRestore()" /><img src="blocks/images/blocks_12.gif" alt="thumb6" width="98" height="99" onmouseover="MM_effectAppearFade(this, 1000, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false)" /><img src="blocks/images/blocks_13.gif" alt="edge6" width="101" height="99" /><br/>
<img src="blocks/images/blocks_14.gif" alt="thumb7" onmouseover="MM_effectAppearFade(this, 1000, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false)" /><img src="blocks/images/blocks_15.gif" alt="thumb8" width="101" height="100" onmouseover="MM_effectAppearFade(this, 1000, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false)" /><img src="blocks/images/blocks_16.gif" alt="thumb9" width="98" height="100" onmouseover="MM_effectAppearFade(this, 1000, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false)" /><img src="blocks/images/blocks_17.gif" alt="thumb10" width="101" height="100" onmouseover="MM_effectAppearFade(this, 1000, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 1000, 0, 100, false)" /></div>
<div id="empty"><img src="blocks/empty/images/emptyblocks_05.gif" alt="empty1" width="100" height="100" /><br/><img src="blocks/empty/images/emptyblocks_06.gif" alt="empty2" /><img src="blocks/empty/images/emptyblocks_07.gif" alt="empty3" width="101" height="100" /><br/><img src="blocks/empty/images/emptyblocks_10.gif" alt="empty4" /><img src="blocks/empty/images/emptyblocks_11.gif" alt="empty5" width="101" height="99" /><img src="blocks/empty/images/emptyblocks_12.gif" alt="empty6" width="98" height="99" /><br/><img src="blocks/empty/images/emptyblocks_14.gif" alt="empty7" /><img src="blocks/empty/images/emptyblocks_15.gif" alt="empty8" width="101" height="100" /><img src="blocks/empty/images/emptyblocks_16.gif" alt="empty9" width="98" height="100" /><img src="blocks/empty/images/emptyblocks_17.gif" alt="empty10" width="101" height="100" /></div> <div id="largeim"><img src="" alt="" name="largeimage" width="600" height="550" id="largeimage" /></div><div id="fade"><img src="thumbs/jpgs/fade.jpg" alt="fade" width="600" height="550" border="0" /></div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@pathfinder74Aug 17.2008 — no clue... but that's pretty awesome looking
Copy linkTweet thisAlerts:
@atom_kOct 24.2008 — Yeah, I'm having the same problem. I found this http://codingforums.com/archive/index.php?t-87673.html and it works, but you lose the cool fade. I've yet to find a way to combine the fade effect with a delay.

If your interested, here's my page with the fades and here it is with the delay.
×

Success!

Help @PieceOrutt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...