Change item location every time a page loads

Question

I have an HTML page with 5 images (48 pixels × 48 pixels each). I want to show images in random places on a web page every time the page loads.

I don’t know how to implement this, I just know that for this I will need CSS and JavaScript (for randomization). Any ideas or suggestions?

Here is a 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

Suppose you already have images encoded in your html document. What you need to do (if you want to do this with PHP), add a style attribute for each element. In your case, your images are stored in <a> tags, so you need to put the <a> tag randomly, not 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 like this, -

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

Now all you have to do is call this function for every 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="... 

The <a> tags will now contain random CSS positioning options, and their images will move with them.

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

---

Links -

• rand()
• implode()

Answer 2

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

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

To apply this to multiple elements:

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

Here is the same 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 3

Solution using 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 demonstration

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 the following:

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