flexxall Posted August 18, 2009 Share Posted August 18, 2009 Ok I think I have most of it right but I'm missing something and not sure what Heres the code for my blendimage.js /* * Original from: http://brainerror.net/scripts/javascript/blendtrans/demo.html * * <--Embedd with this--> <script type="text/javascript" src="blendimages.js"></script> * <--Add Images--> * <div id="blendme" class="blend" style="width:400px; height:200px;"> * <img src="image1.jpg" alt="my first image"> * <img src="image1.jpg" alt="my second image"> * <img src="image1.jpg" alt="my third image"> * </div> * * <script type="text/javascript"> * function init() {blendImages('blendme');} * window.onload = init; * </script> * * * * * * */ //find next image function nextImage(o) { do o = o.nextSibling; while(o && o.tagName != 'IMG'); return o; } //find first image inside an element function firstChildImage(o) { o = o.firstChild; while(o && o.tagName != 'IMG') { o = o.nextSibling; } return o; } //set the opacity of an element to a specified value function setOpacity(obj, o) { obj.style.opacity = (o / 100); obj.style.MozOpacity = (o / 100); obj.style.KhtmlOpacity = (o / 100); obj.style.filter = 'alpha(opacity=' + o + ')'; } //make image invisible and set next one as current image function getNextImage(image) { if (next = nextImage(image)) { image.style.display = 'none'; image.style.zIndex = 0; next.style.display = 'block'; next.style.zIndex = 100; } else { //if there is not a next image, get the first image again next = firstChildImage(image.parentNode); } return next; } //set default values for parameters and starting image function blendImages(id, speed, pause, caption) { if(speed == null) { speed = 30; } if(pause == null) { pause = 1500; } var blend = document.getElementById(id); var image = firstChildImage(blend); startBlending(image, speed, pause, caption); } //make image a block-element and set the caption function startBlending(image, speed, pause, caption) { image.style.display = 'block'; if(caption != null) { document.getElementById(caption).innerHTML = image.alt; } continueFadeImage(image, 0, speed, pause, caption); } // ASC: copied from http://www.sean.co.uk/a/webdesign/javascriptdelay.shtm function pausecomp(millis) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while(curDate-date < millis); } //set an increased opacity and check if the image is done blending function continueFadeImage(image, opacity, speed, pause, caption) { opacity = opacity + 3; if (opacity < 103) { setTimeout(function() {fadeImage(image, opacity, speed, pause, caption)}, speed); } else { //if the image is done, set it to the background and make it transparent image.parentNode.style.backgroundImage = "url("+image.src+")"; // ASC: pause 1sec here to prevent MSIE image flash ... var paws=pause-1000; if (paws < 0 ) { paws = 0; } pausecomp(1000); setOpacity(image,0); //get the next image and start blending it again image = getNextImage(image); setTimeout(function() {startBlending(image, speed, pause, caption)}, paws); } } //set the opacity to a new value and continue the fading function fadeImage(image, opacity, speed, pause, caption) { setOpacity(image,opacity); continueFadeImage(image, opacity, speed, pause, caption); } And heres the code in my HTML page <!-- INCLUDE overall_header.html --> <script type="text/javascript" src="blendimages.js"></script> <script type="text/javascript"> function init() { blendImages('blendme'); } window.onload = init; </script> <style type="text/css"> .blend img { opacity: 0; -moz-opacity: 0; -khtml-opacity:0; filter: alpha(opacity=0); } </style> <div id="blendme" class="blend" style="width:30px; height:30px;"> <img src="./images/test1.gif" alt="my first image"> <img src="./images/test2.gif" alt="my first image"> </div> The blendimages.js and the html page are in the same directory and the image link is correct. Where have I missed something. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.