StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 <code>style</code> attribute to each element. In your case, your images are held within <code><a></code> tags, so you'll want to position the <code><a></code> tag randomly and not the images...</p> <pre><code>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).'" '; } </code></pre> <p>The function will return a string similar to this -</p> <pre><code>style="position:absolute;top:10px; left:45px;" </code></pre> <p>Now all you have to do is call this function for each image on your page - </p> <pre><code><a <?php echo generateRandomPositions();?> ><img src="... <a <?php echo generateRandomPositions();?> ><img src="... <a <?php echo generateRandomPositions();?> ><img src="... <a <?php echo generateRandomPositions();?> ><img src="... </code></pre> <p>Your <code><a></code> tags will now contain random CSS positioning parameters and their images will move with them.</p> <p>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.</p> <hr> <p>References - </p> <ul> <li><a href="http://php.net/manual/en/function.rand.php" rel="nofollow"><code>rand()</code></a></li> <li><a href="http://php.net/manual/en/function.implode.php" rel="nofollow"><code>implode()</code></a></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload