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. Link to comment https://forums.phpfreaks.com/topic/170765-javascript-blend-image-help/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.