WAMP PHP Testing in Localhost

Question

I created a simple login webpage complete with CSS and Background images etc. It uses PHP to access the database when you click LOGIN/SUBMIT.

The problem is when I do the testing/viewing using the Localhost in WAMP. It displays the form and other content such as text and paragraphs..but the background images and images used as the border and button of the login page doesn't show. It just shows the broken image icon.

When I open the php page in the browser it displays everything the only thing it doesn't do right is the lookup in the database but that's understandable since the PHP server is in WAMP.

How do I make the images display correctly in the Localhost in WAMP?

Here's the code of my login page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/cssLoginPage.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {  

    //Put in the DIV id you want to display
    launchWindow('#dialog1');

    //if close button is clicked
    $('.window #close').click(function () {
        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         


    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    }); 

});

function launchWindow(id) {

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        $(id).css('top',  10);
        $(id).css('left', 780);
        /*      
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height());
        $(id).css('left', winW/2-$(id).width()/2);
        */

        //transition effect
        $(id).fadeIn(2000); 


}

</script>


<title>Untitled Document</title>
</head>

<body>


<div id="boxes">

<!-- Start of Login Dialog -->  

<div id="dialog1" class="window">
  <div class="d-header">
  <form name="form1" method="post" action="loginproc.php">
    <input name="myusername"  type="text" id="myusername" value="username" onclick="this.value=''"/><br/>
    <input name="mypassword"  type="password" id="mypassword" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>

  <div class="d-login"><input type="image" alt="Login" title="Login" src="./css/images/login-button.png"/></div>
  </form>
  </div>


  <!-- End of Login Dialog -->  
</div>
</div>
</body>
</html>

Here's the CSS:

@charset "utf-8";
/* CSS Document */

.loginTable { 
    width:300px; margin: 250px auto;
    box-shadow: 1px 1px 3px #000;
            }

body
{
background:url(../css/images/homepage.jpg)no-repeat top center;

}
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(../css/images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(../css/images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(../css/images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;

Answer 1

The src in the image tag needs to be like this:

<div class="d-login">
    <input type="image" alt="Login" title="Login" 
           src="/css/images/login-button.png"/>
</div>

Note that the src property no longer has . . Also, make sure the image is in the www folder.

WAMP PHP Testing in Localhost

Question

1 answers

solution1
0 2012-09-23 04:11:16

WAMP PHP Testing in Localhost

Question

1 answers

solution1 0 2012-09-23 04:11:16

solution1
0 2012-09-23 04:11:16