Jump to content

Javascript Blend Image ... Help


flexxall

Recommended Posts

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.