Hello,
I’m having a minor issue with getting the code below make the images in the code fade in and out with each new image that is called. I tried quite a few ways to get this to work, however it appears that I’m to new to scripting to figure it out, so any help would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<script type="text/javascript">
//preload images
var imgs = ["/images/img0.jpg", "/images/img1.jpg", "/images/img2.jpg"];
var loadedImgs = []
for (var i=0; i<imgs.length; i++)
{
loadedImgs[i] = new Image();
loadedImgs[i].src = imgs[i];
}
</script>
</head>
<body>
<img src="/images/img0.jpg" id="slide" style="border: 0; cursor: pointer" />
<script type="text/javascript">
var slideImg = document.getElementById('slide');
var step = 0;
var whichimage = 0;
var timer;
function slideit()
{
if (!document.images) return;
slideImg.src = loadedImgs[step].src;
whichimage = step;
step = (step < 2) ? step + 1 : 0;
timer = setTimeout("slideit()", 5000);
}
function slidelink()
{
if (whichimage==0)
{
window.location = "link1.htm";
}
else if (whichimage==1)
{
window.location = "link2.htm";
}
else if (whichimage==2)
{
window.location = "link3.htm";
}
}
window.onload = function()
{
slideImg.onclick = slidelink;
slideImg.onmouseover = function(timeElapsed)
{
clearTimeout(timer);
};
slideImg.onmouseout = function(timeElapsed)
{
timer = setTimeout("slideit()", 900);
};
slideit();
};
</script>
</body>
</html>
It would be nice to not only get them to fade, but to be able to set the time it takes between transition.
Thanks in advance!
You will need two different images for the fade effect to work.
What you can do if you want them fading in with the previous one being fully visible is to have the script create a second image that is fully transparent, and place that second image over the top of the first then gradually make that second image fully opaque.
When it’s completed fading in, you set the original image src to that of the new one, and make the second one fully transparent again.
If you just want to fade one out before showing the next, you only need to use setInterval to make the image fully transparent, before using a similar technique to make the next one fully opaque.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<script type="text/javascript">
//preload images
var imgs = ["http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg", "http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg", "http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"];
var loadedImgs = []
for (var i=0; i<imgs.length; i++)
{
loadedImgs[i] = new Image();
loadedImgs[i].src = imgs[i];
}
</script>
<script type="text/javascript">
var slideImg,clone;
var step = 0;
var whichimage = 0;
var timer;
function slideit(){
if (!document.images) return;
var p=pos(slideImg);
clone.src = loadedImgs[step].src;
clone.style.left=p[0]+'px';
clone.style.top=p[1]+'px';
animate(clone,0,100,new Date(),1000);
whichimage = step;
step = (step < 2) ? step + 1 : 0;
timer = setTimeout("slideit()", 5000);
}
function slidelink()
{
if (whichimage==0)
{
window.location = "link1.htm";
}
else if (whichimage==1)
{
window.location = "link2.htm";
}
else if (whichimage==2)
{
window.location = "link3.htm";
}
}
function animate(obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)&&now>=0){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
setTimeout(function(){ animate(obj,f,t,srt,mS); },10);
}
else {
slideImg.src=obj.src;
obj.style.left='-3000px';
}
}
function pos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
window.onload = function()
{
slideImg = document.getElementById('slide');
clone=document.createElement('IMG');
clone.style.position='absolute';
clone.style.zIndex='101';
clone.style.left='-3000px';
document.body.appendChild(clone);
slideImg.onclick = slidelink;
slideImg.onmouseover = function(timeElapsed)
{
clearTimeout(timer);
};
slideImg.onmouseout = function(timeElapsed)
{
timer = setTimeout("slideit()", 900);
};
slideit();
};
</script>
</head>
<body>
<center> <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="slide" style="border: 0; cursor: pointer" />
</center></body>
</html>