0

CSSや背景画像などを備えた簡単なログインWebページを作成しました。[ログイン/送信]をクリックすると、PHPを使用してデータベースにアクセスします。

問題は、WAMPでローカルホストを使用してテスト/表示を行う場合です。フォームやテキストや段落などの他のコンテンツが表示されますが、背景画像やログインページの境界線やボタンとして使用されている画像は表示されません。壊れた画像のアイコンが表示されるだけです。

ブラウザでphpページを開くと、すべてが表示されます。正しく実行されないのはデータベースでの検索だけですが、PHPサーバーはWAMPであるため、これは理解できます。

WAMPのローカルホストで画像を正しく表示するにはどうすればよいですか？

これが私のログインページのコードです：

<!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>

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;
4

1 に答える 1

0

画像タグ内のsrcは次のようにする必要があります。

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

srcプロパティにはもう。がないことに注意してください.。また、画像がwwwフォルダにあることを確認してください。

于 2012-09-23T04:11:16.143 に答える