Can anyone help, I'm trying to get the image to fade out to another picture. But can't get it to work.
<head>
<script type="text/javascript">
function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = imagefile;
//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
</script>
</head>
<body>
<a href="javascript:blendimage('blenddiv','blendimage', 'test1.gif',200)">Image 1</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'test2.gif',200)">Image 2</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'test3.gif',200)">Image 3</a>
<div style="background-image: url(test2.gif); background-repeat: no-repeat; width: 100px; height: 100px;" id="blenddiv">
<img src="test2.gif" style="width: 100px; height: 100px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;" id="blendimage" alt="" />
</div>
</body>
</html>
<head>
<script type="text/javascript">
function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = imagefile;
//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
</script>
</head>
<body>
<a href="javascript:blendimage('blenddiv','blendimage', 'test1.gif',200)">Image 1</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'test2.gif',200)">Image 2</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'test3.gif',200)">Image 3</a>
<div style="background-image: url(test2.gif); background-repeat: no-repeat; width: 100px; height: 100px;" id="blenddiv">
<img src="test2.gif" style="width: 100px; height: 100px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;" id="blendimage" alt="" />
</div>
</body>
</html>