change the location of an element everytime the page is loaded

Question

I have an HTML page with 5 images (48px × 48px each) on it. I want to appear the images at random locations on the webpage everytime the page is loaded.

I don't know how to implement this, I just know I'm going to need CSS and JavaScript (for randomization) for this. Any ideas or suggesions?

Here is sample HTML code:

  <a href="http://twitter.com/"><img alt="Twitter" src="/images/twitter-48.png" /></a>
  <a href="http://facebook.com/><img alt="Facebook" src="/images/facebook-48.png" /></a>
  <a href="https://plus.google.com/"><img alt="Google Plus" src="/images/plus-48.png" /></a>
  <a href="https://github.com/"><img alt="GitHub" src="/images/github-48.png" /></a>

Answer 1

Here's a rather simple implementation: http://jsfiddle.net/Eu8wT/

$('div.randomizeme').css({
    top: Math.random() * 100+'%',
    left: Math.random() * 100+'%'
});​

To apply this over several elements:

$('div.randomizeme').each(function(){
    $(this).css({
        top: Math.random() * 100+'%',
        left: Math.random() * 100+'%'
    });
});​

Here's the same thing without jQuery:

var elements = document.querySelectorAll('.randomizeme');
for (var i in elements) {
    elements[i].style.top = Math.random() * 100 + '%';
    elements[i].style.left = Math.random() * 100 + '%';
}​

Answer 2

A solution that uses pure JavaScript (no library)

var imgs = document.querySelectorAll('.rand'), 
    len = imgs.length, 
    /* subtract the width/ height of images */
    w = document.body.clientWidth - 48, 
    h = document.body.clientHeight - 48;

for(var i = 0; i < len; i++) {
  imgs[i].style.top = Math.floor(Math.random() * h) + 'px';
  imgs[i].style.left = Math.floor(Math.random() * w) + 'px';
}

working demo

Answer 3

Lets assume that you already have the images hardcoded on to your html document. What you would need to do (if you want to accomplish this with PHP) is add a style attribute to each element. In your case, your images are held within <a> tags, so you'll want to position the <a> tag randomly and not the images...

function generateRandomPositions(){

  // define maximum and minimum 'top' values
  $maxTop = 1000;
  $minTop = 0;

  // define maximum and minimum 'left' values    
  $maxLeft = 1000;
  $minLeft = 0; 


  $styleProperties = array(
    'position:absolute',
    'top:'.rand($minTop,$maxTop) . 'px',
    'left:'.rand($minLeft,$maxLeft) . 'px'
  );

  return ' style="'.implode(';',$styleProperties).'" ';
}

The function will return a string similar to this -

style="position:absolute;top:10px; left:45px;"

Now all you have to do is call this function for each image on your page -

<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...

Your <a> tags will now contain random CSS positioning parameters and their images will move with them.

As I'm sure you can see, this method of using PHP to generate inline CSS properties is kind of a backwards way to do this. JavaScript would probably be the best way to get what you are looking for and there are other answers that cover it. You could initially hide your elements with CSS and then display them with the JavaScript after you have set the random positioning.

---

References -

• rand()
• implode()

Answer 4

<?php
$images= array(
    'twitter-48.png',
    'facebook-48.png',
    'plus-48.png',
    'github-48.png'
);
$keys= range(0, count($images)- 1);
shuffle($keys);
foreach($keys as $key) {
    print "<div>{$images[$key]}</div>";
}

EDIT:

<?php
$images= array(
    array('href'=> 'http://twitter.com/', 'alt'=> 'Twitter', 'src'=> '/images/twitter-48.png'),
    array('href'=> 'http://facebook.com/', 'alt'=> 'Facebook', 'src'=> '/images/facebook-48.png'),
    array('href'=> 'https://plus.google.com/', 'alt'=> 'Google Plus', 'src'=> '/images/plus-48.png'),
    array('href'=> 'https://github.com/', 'alt'=> 'GitHub', 'src'=> '/images/github-48.png')
);
$keys= range(0, count($images)- 1);
shuffle($keys);
?>
<div class='location1'>
    <a href='<?php print $images[$keys[0]]['href']; ?>'><img alt='<?php print $images[$keys[0]]['alt']; ?>' src='<?php print $images[$keys[0]]['src']; ?>'></img></a>
</div>
<div class='location2'>
    <a href='<?php print $images[$keys[1]]['href']; ?>'><img alt='<?php print $images[$keys[1]]['alt']; ?>' src='<?php print $images[$keys[1]]['src']; ?>'></img></a>
</div>
<div class='location3'>
    <a href='<?php print $images[$keys[2]]['href']; ?>'><img alt='<?php print $images[$keys[2]]['alt']; ?>' src='<?php print $images[$keys[2]]['src']; ?>'></img></a>
</div>
<div class='location4'>
    <a href='<?php print $images[$keys[3]]['href']; ?>'><img alt='<?php print $images[$keys[3]]['alt']; ?>' src='<?php print $images[$keys[3]]['src']; ?>'></img></a>
</div>

Answer 5

Try this:

$images = array('1.gif', '2.gif', '3.gif');
$images = array_shaffle($images);
foreach ($images as $image) {
  echo "<img src='{$image}' />;
}