Web Analytics Made Easy -
StatCounter Trying to create code to display a picture centered - CodingForum

Announcement

Collapse
No announcement yet.

Trying to create code to display a picture centered

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trying to create code to display a picture centered

    Can anyone help me with how to display a picture centered on the screen?

    thanks

    MikoThang

  • #2
    I take it you mean a pop-up image which is centred in the screen. If it is static then you do this in your HTML.



    Code:
    <script type = "text/javascript">
    
    var popWin = "";
    function openwin(url, strWidth, strHeight) {
    if (popWin != "") {popWin.close()}
    leftStr = (screen.width-strWidth)/2;
    topStr = (screen.height-strHeight)/2-50;
    windowProperties = "toolbar=no,menubar=no,scrollbars=no,statusbar=no,height="+strHeight+",width="+strWidth+",left="+leftStr+",top="+topStr+"";
    popWin = window.open(url,'newWin',windowProperties);
    }
    
    </script>
    
    </head>
    
    <body onload = "openwin('yourUrl.html',400,500)">

    Remember that most modern browsers will block unwanted pop-ups.


    i raed a wlihe ago taht as lnog as the frsit and lsat lttesrs in a wrod are in the cerroct pcale msot of us wulod siltl be albe to raed bceause our barnis jsut looks at the frsit and lsat lttesrs.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

    Comment


    • #3
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>No Title</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript">
      
      	function init(){
      
      		document.getElementById('fixedImg').onclick = function()
      			{
      			 this.style.display = "none";
      			}
      	}
      
      	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
      	
      </script>
      <style type="text/css">
      
      	 body {height: 1500px; background-color: #f5f5f5;}
      	.fixedPosition {position: fixed; top: 46%; left: 43%; height: 75px; width: 150px;	
      		        border: 1px solid black; background-color: #f0fff0; text-align: center;
      		        font-family: arial; font-size: 12pt; color: black; padding-top: 2px;
      			cursor: pointer;}
      
      </style>
      <!--[if gte IE 5.5]>
      <![if lt IE 7]>
      <style type="text/css">
      
      	.fixedPosition {position: absolute; 		
      		        top: expression((document.documentElement.scrollTop + document.documentElement.clientHeight / 2)
      		        - (this.clientHeight / 2)  + "px");}	
      
      </style>
      <![endif] 
      <![endif]--> 
      </head>
      	<body>
      		<div id="fixedImg" class="fixedPosition">Insert Image Here</div>
      	</body>
      </html>
      Last edited by 12 Pack Mack; Apr 15, 2009, 02:25 PM.

      Comment


      • #4
        Miko, I am still learning myself, but if your just trying to center a picture you can use the html command

        <center> put your img tag for the pic here and then close it with </center>

        Comment


        • #5
          Originally posted by 12 Pack Mack View Post
          Code:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title>No Title</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script type="text/javascript">
          
          	function init(){
          
          		document.getElementById('fixedImg').onclick = function()
          			{
          			 this.style.display = "none";
          			}
          	}
          
          	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
          	
          </script>
          <style type="text/css">
          
          	 body {height: 1500px; background-color: #f5f5f5;}
          	.fixedPosition {position: fixed; top: 46%; left: 43%; height: 75px; width: 150px;	
          		        border: 1px solid black; background-color: #f0fff0; text-align: center;
          		        font-family: arial; font-size: 12pt; color: black; padding-top: 2px;
          			cursor: pointer;}
          
          </style>
          <!--[if gte IE 5.5]>
          <![if lt IE 7]>
          <style type="text/css">
          
          	.fixedPosition {position: absolute; 		
          		        top: expression((document.documentElement.scrollTop + document.documentElement.clientHeight / 2)
          		        - (this.clientHeight / 2)  + "px");}	
          
          </style>
          <![endif] 
          <![endif]--> 
          </head>
          	<body>
          		<div id="fixedImg" class="fixedPosition">Insert Image Here</div>
          	</body>
          </html>

          Something familiar here.

          All the code given in this post has been tested and is intended to address the question asked.
          Unless stated otherwise it is not just a demonstration.

          Comment

          Working...
          X