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

    Join Date
    Jun 2008
    Posts
    8
    Rep Power
    0

    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):

    Code:
    <html>
    
    	<head>
    	
    		<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; 
    			//FINISHED 
    		} 
    		</script>
    		
    		
    		<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;
    				z-index:2 
    			}
    			
    			.box {
    				text-align: center;
    				height:20px;
    				margin-top: 15px
    			}
    			
    		</style>
    		
    	</head>
    	
    	<body>
    	
    		<img src="load.gif" id="myImageTag" name="myImageTag" class="image">
    	
    	</body>
    	
    </html>
  2. #2
  3. No Profile Picture
    Banned
    Devshed Newbie (0 - 499 posts)

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

    document.getElementById("myImageTag").style.visibility="hidden"

    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