JavaScript: Random Image Position

by jacob_truax

HTML

<!DOCTYPE html> <!-- This is just my HTML5-valid template. Make sure you set this up correctly for your personal needs -->

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        
            html {
                font: 16px "Segoe UI", "Segoe WPC", Helvetica, Arial, "Arial Unicode MS", Sans-Serif;
            }
            
            div {
                float: left;
            }
            
            #page_Wrapper {
                
            }
            
            
        </style>
    </head>
    
    <body>
        <div id="page_Wrapper">
            <img src="http://mythofechelon.co.uk/main/images/thumbnails/Earth_Western_Hemisphere.jpg" id="image" style="position: absolute;" />
        </div>
        
        <!-- Include the script after all DOM elements have been created, to avoid any potential DOM-related errors -->
        <script>
            window.onLoad = Prep();
            
            function Prep(){
                window_Height = window.innerHeight;
                window_Width = window.innerWidth;
                
                image_Element = document.getElementById("image");
                image_Height = image_Element.clientHeight;
                image_Width = image_Element.clientWidth;
                
                availSpace_V = window_Height - image_Height;
                availSpace_H = window_Width - image_Width;
                
                var changeInterval = 3000; // Time has to be in miliseconds. So, 3000 is 3 seconds
                setInterval(moveImage, changeInterval);
            }
            
            function moveImage(){
                var randNum_V = Math.round(Math.random() * availSpace_V);
                var randNum_H = Math.round(Math.random() * availSpace_H);
                
               ...