Results 1 to 2 of 2

Thread: Image sort order - little problem

  1. #1
    Join Date
    Jul 2006

    Thumbs up Image sort order - little problem

    I'm using javascript to change the sort order of 3 images. I want them to be in random order. However the method I am using right now loads the images, and THEN changes the order, so it does a little ugly refresh type thing.
    Here's the code:

    //create variables from the existing link URL's
    var dlnk1 = document.getElementById("lnk1").href
    var dlnk2 = document.getElementById("lnk2").href
    var dlnk3 = document.getElementById("lnk3").href
    //creat array that keeps the source of the images and the URL's of their links together during the random sorting
    var group1 = new Array("../images/Front_Page_Ads/1.jpg",dlnk1);
    var group2 = new Array("../images/Front_Page_Ads/2.jpg",dlnk2);
    var group3 = new Array("../images/Front_Page_Ads/3.jpg",dlnk3);
    //create varialbe to hold all of this
    var img_name = new Array(group1,group2,group3);
    //function for creating random sort order
    function randOrd(){ return (Math.round(Math.random())-0.5); } 
    //sort top layer of array for random order
    img_name.sort( randOrd );
    //change the source of the images
    document.ImagePH1.src = img_name[0][0];
    document.ImagePH2.src = img_name[1][0];
    document.ImagePH3.src = img_name[2][0];
    //change the URL of the link
    document.getElementById("lnk1").href = img_name[0][1];  
    document.getElementById("lnk2").href = img_name[1][1]; 
    document.getElementById("lnk3").href = img_name[2][1];
    This is placed AFTER the images are loaded in a straightforward manner within the HTML. Like this:

    <a href="../whateverlinkhere.htm" id="lnk1"><img src="../images/Front_Page_Ads/1.jpg" name="ImagePH1" width="266" height="150" border="0" id="one2" /></a>
    If I place the javascript code BEFORE this html, it obviously doesn't work. And if i remove the source reference from within the image tags, the images won't appear in non-javascript browsers (i know the images won't be sorted randomly, but at least they'll show up).

    Let me know if you guys know of any way to do this without getting the ugly *sort images after they're loaded* thing.

    thanks so much,
    - david

  2. #2
    Join Date
    Nov 2002
    If you determine the random order in the head script, you can use document.write in the body to dynamically create your images with the right img src so you don't have to watch it swap.

    Or, you could use a transparent image as the initial placeholder and swap it out for the real one onload. It is basically the same asction, except nobody will see it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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