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
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.