Page 2 of 5 FirstFirst 1234 ... LastLast
Results 11 to 20 of 41

Thread: Make Layers Appear Over Time

  1. #11
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    yes just on load and then theyre just like static no loops or anything.

  2. #12
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    sorry i didnt get what you mean at first there, no i just want to be able to add a mouseover swap image behavior to the images once they have been loaded

  3. #13
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Change script.js to:
    Code:
    // Made by Nile, http://beta.unlinkthis.net
    //DO NOT REMOVE THIS LABEL
    var loadimg = function(id, imgs, swap){
    	var count = imgs.length;
    	var a = setInterval(function(){
    		var image = document.createElement('img');
    		image.style.position = "absolute";
    		image.src = imgs.shift();
    		document.getElementById(id).appendChild(image);
    		count--;
    		if(count == 0){ clearInterval(a); }
    	}, 500);
    	var swapped = document.createElement('img');
    	swapped.style.position = "absolute";
    	document.getElementById(id).onmouseover = function(){
    		document.getElementById(id).appendChild(swapped);
    	};
    	document.getElementById(id).onmouseout = function(){
    		document.getElementById(id).removeChild(swapped);
    	};
    };
    And then, on your html page, change:
    Code:
    loadimg("image", effect);
    To:
    Code:
    loadimg("image", effect, "swap.png");
    Change swap.png to your image you want it to be swapped with.

    Also, did you want it to go back when you move your mouse away? If not, please tell me, because thats what the above code is aiming to do.
    This code is not tested.
    Jeremy | jfein.net

  4. The Following User Says Thank You to Nile For This Useful Post:

    TicTacWoe (12-23-2009)

  5. #14
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Many thanks again Nile, I'll try that out now and yes I did want it to go back to the original image on mouseout so in theory the code should be fine.

    cheers

  6. #15
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Ok, tell me your results.
    Jeremy | jfein.net

  7. The Following User Says Thank You to Nile For This Useful Post:

    TicTacWoe (12-23-2009)

  8. #16
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    hmmm so far that isnt working and I've noticed another problem I'm having with this in general. So far I'd only tested this with loaded one image but when I load more than one the second, third images etc just appear on top of the first one. What is it I'm supposed to do to get the images to appear within different layers on the page.

    Sorry about all the questions/confusion as you probably guessed im not very experienced with coding!

  9. #17
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Ok let me test out the code. For your second problem, do you mean when you try to add another one of these to your pages?
    Jeremy | jfein.net

  10. The Following User Says Thank You to Nile For This Useful Post:

    TicTacWoe (12-23-2009)

  11. #18
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    no I mean I don't know how to work it so that the first image appears within one layer, the second image appears within a different layer and so on.

    what I do is replace the names in the following code with the paths of my own files (this is working fine)

    new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');

    but I dont quite get what I'm supposed to do nextso that image1 will load in a different layer to image2 as it is theyre all loading on top of one another in the same layer which has the ID 'image'

  12. #19
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    is it simply that I need to put the following code in each time for each image that appears?

    loadimg("image", effect);
    </script>
    <style type="text/css">
    #image {
    width: 200px;
    height: 200px;
    background-color: #ddd;
    }

    and then give each layer the same ID as the bit after loading in the above example.

  13. #20
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    maybe if you could show me an example which has images being loaded in two or three layers I'd understand this better but right now im very confused!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •