Is there a javascript for random placing of images on page?

Hie,
Thanks for opportunity to ask this questions.
Here is the nice page where person without particular knowledge of javascript can find image rotation javascript http://www.dyn-web.com/javascript/
Everything is all right on that page, but I am looking for something a bit different. I am planning to create a page where there will be some number of images, which are absolutely identical in size (170x170). Those images will be compiled into html table. It is very simple, even I can do it. Than I am implementing my first javascript which will show large image when mouseover the respective thumb. So also I would like to have another javascript which would rotate those identical images around the html table. This differen from just rotation, I would call it random placement. Is it possible at all? I was unable to find any relevant info online.
Please, GURUS, help
Thanks very much in advance
P.S. hope you understood what I mean. Images should appear in different part of the table every time the page is loaded.

 

I don't know of an existing script, but here's how I'd go about creating such a randomly placed table of images:

I tend to lean more toward procedural programming when doing relatively simple javascripts rather than OOP... But that's just me. Therefore, this approach may be ugly to someone who prefers to wrap everything nicely in objects.

First, I'd generate a two-dimensional array of image locations (thumb and full-size)...

images = [[['path/to/thumb01.gif'],['path/to/full01.gif']],[['path/to/thumb02.gif'],['path/to/full02.gif']], ...];

To randomly place these images, I'd take the images array and splice it (images.length) number of times into a temporary array. Here's some code to illustrate:

var tempImages;
for ( var x=i; x<images.length; x++ )
tempImages.push( splice(images, Math.floor(Math.random()*images.length), 1) );

Then I'd simply loop through tempImages to place them into the table.

To get the "Rotating" effect, just make sure to give each of your images an ID that can easily be looped through so you can dynamically change the src property of each image with a setInterval. If you want the rotation to also be random, I'd use the temp array and splice approach I mentioned earlier inside this function.

To make the larger image appear onmouseover, I’d create an absolutely positioned div somewhere that looks like this:

<div id="popup" style="position: absolute; visibility: hidden;"><img src=’…’ id=”largeImg”></div>

You can load the correct image, hide, and show it with the following called via onmouseover and onmouseout:

function showLarge( i ) {
  document.getElementById("largeImg").src = images[1][1];
  document.getElementById("popup").style.visibility = 'visible';
}

function hideLarge( i ) {
  document.getElementById("popup").style.visibility = 'hidden';
}

Code (markup):

Then in order to get the popup div to appear in the correct location, I’d wrap the whole table inside a Div with an ID (lets say "imageTable" and use this… (un-copyrighted and slightly modified code pulled from a site I can’t remember off the top of my head):

if( document.captureEvents && Event.MOUSEMOVE ) {
  document.captureEvents( Event.MOUSEMOVE );
}
document.getElementById("imageTable").onmousemove = moveDescription;
function moveDescription(e) {
  if( !e ) {
    if( window.event ) {
      //Internet Explorer
      e = window.event;
    } else {
      //total failure, we have no way of referencing the event
      return;
    }
  }
  if( typeof( e.pageX ) == 'number' ) {
    //most browsers
    var xcoord = e.pageX;
    var ycoord = e.pageY;
  } else if( typeof( e.clientX ) == 'number' ) {
    //Internet Explorer and older browsers
    //other browsers provide this, but follow the pageX/Y branch
    var xcoord = e.clientX;
    var ycoord = e.clientY;
    var badOldBrowser = ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) ||
     ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 ) ||
     ( navigator.vendor == 'KDE' );
    if( !badOldBrowser ) {
      if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //IE 4, 5 & 6 (in non-standards compliant mode)
        xcoord += document.body.scrollLeft;
        ycoord += document.body.scrollTop;
      } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        //IE 6 (in standards compliant mode)
        xcoord += document.documentElement.scrollLeft;
        ycoord += document.documentElement.scrollTop;
      }
    }
  } else {
    //total failure, we have no way of obtaining the mouse coordinates
    return;
  }
  document.getElementById("popup").style.left = (xcoord + 20) + 'px';
  document.getElementById("popup").style.top = (ycoord + 10) + 'px';
}

Code (markup):

Note that there will be a delay between the mouseover and load time of the image. You could take this script a step further and load a special "loading graphic" that displays until the large image is loaded... I'd handle this by setting the src attribute of the large image to a preloaded "loading" image. Load the large new image into a image inside a hidden div with an onload event handler attached. The onload event handler simply sets the source of the large image from the loading image to the new loaded large image.

Hope that helps you think it through.

Dex