1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Rep Power

    CSS Overlay box (also js)

    I'm making a fairly simple one-page website, but i need to display a box with some text over anything else at some points using javascript. I'm first trying to actually get a box working that will display over the rest of the page, somehow what I read on the internet doesn't work.

    I have the following code. Ive made a css class 'box' which should describe the position of where I want the box, now I need to figure out how to get it working and preferably how to display/hide it using javascript (at places indicated in the script):

    		<script language="javascript" type="text/javascript">
    		// This event is fired after all images on the page have loaded... therefore 
    		// we know that image 1 is being displayed 
    		window.onload = function() { 
    		var innertext = "<p>Loading Colors...<\/p>";
    		//start displaying here
    		loadImg("ge64bw.jpg", image2Done); 
    		//stop displaying here
    		//This function loads an image from a url then calls a method 
    		function loadImg(url, handler) { 
    			//Declare a new image 
    			var img = new Image(); 
    			//Call the passed in method but change the signature as we are not interested  
    			// in onload event args 
    			img.onload = function() { handler(this); } ; 
    			//Initiate the download of the image 
    			img.src = url; 
    		//Called when the second image has finished downloading 
    		function image2Done(img) { 
    			//Swap the images 
    			document.getElementById("myImageTag").src = img.src; 
    			//Go get the third 
    			loadImg("ge64c.jpg", image3Done); 
    		//Called when image 3 has finished downloding 
    		function image3Done(img) { 
    			//Swap the images 
    			document.getElementById("myImageTag").src = img.src; 
    		<title>Ge64 Tech Repairs</title>
    		<style type="text/css">
    			.image {    
    				display: block;
    				margin-left: auto;
    				margin-right: auto;
    				width: 924px
    				height: 668px;
    				margin-top: 45px;
    			.box {
    				text-align: center;
    				margin-top: 15px
    		<img src="load.gif" id="myImageTag" name="myImageTag" class="image">
  2. #2
  3. No Profile Picture
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Whiteford MD. USA
    Rep Power
    If you don't want to display the ID image. Just use


    Or "none". To display it again use visibility="display" or "inline". This is more of a JavaScript question so if moderators think it is appropriate then they can do so...

IMN logo majestic logo threadwatch logo seochat tools logo