0

PHPのイメージマップ

<html>
 <body>
 <img style="position: absolute; left:0; top: 0;" border="0" src="images/gen.jpg" usemap="#Map1">
 <map id="Map1" name="Map1">
 <area shape="rect" coords="136,331,211,351" name="home" a href="home.php">
 <area shape="rect" coords="136,379,244,400" name="aboutus" a href="aboutus.php">
 <area shape="rect" coords="136,426,247,447" name="calculate" a href="">
 <area shape="rect" coords="136,475,262,495" name="contactus" a href="">

</body>
 </html>

私のCSS

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

<style type="text/css">

A:link
 { text-decoration: none; color: black; cursor:crosshair; }
 A:visited
 { text-decoration: none; cursor:crosshair; color: black; }
 A:active
 { text-decoration: none; cursor:crosshair; color:black; }
 A:hover {
 text-decoration: none; color: #705551; background-color:black; font weight:none; cursor:help;}

 body 
{ background: #c0c2c3; 
font-family: georgia; 
color: #4a458d; 
font-size: 10pt;
 cursor: s-resize;


}

td
 { font-family: Verdana;
 font-size: 10px; 
color: #4a458d; 
cursor: crosshair; 
text-align: left;
 margin: 0px;}
 }

textarea, input, select {
 font-family : trebuchet ms; 
font-size: 10px; 
color:#4a458d;
 cursor: crosshair;
 border-color: silver; 
border-style: solid; 
border-top-width: 1px; 
border-left-width: 1px;
 border-right-width: 1px; 
border-bottom-width: 1px;
 }


.head 
{font-family: georgia; 
font-weight: none;
 letter-spacing:-3px;
 font-size: 17pt; 
line-height: 16pt;
 color: #48457b;
 border-top: 0px solid;
 border-bottom: 1px solid black;
 border-right: 0px solid;
 border-color: none;
 background-color:#c0c2c3;
 text-align: left;
 text-transform: uppercase;
 }

.head2 
{font-family: georgia; 
font-weight: none;
 letter-spacing:2px;
 font-size: 7pt; 
line-height: 10pt;
 color: #443f80;
 border-top: 0px solid;
 border-bottom: 1px solid black;
 border-right: 0px solid;
 border-color: none;
 background-color:#c0c2c3;
 text-align: left;
 text-transform: none;
 }

PHPでの私のログインページコード

<html>
<body>
 <link rel="stylesheet" href="style.css">
 <?php
 include("map.php"); 
?> 
<form method="post" action="checklogin.php">
 <table width="450" height="88" border="0" align="left">
 <tr>
 <td width="180">Enter your email</td>
 <td width="270">
 <input name="email" type="text" size="30" /></td>
 <tr>
 <td>Enter your password</td>
 <td><input type="password" name="password" type="text" size="30" /></td></tr>

<tr><td colspan="2"><input type="submit" name="Submit" value="Login" /></td></tr></table>


</form>
 </div>

</body></html>

何が問題なのかわかりませんが、イメージ マップを削除しない限り、ログイン ページに入力した内容は表示されません。イメージ マップの後ろに隠れていますが、左側のナビゲーションの横にあるイメージ マップに表示したいと考えています。

4

2 に答える 2

0

迅速で汚い解決策

次の行を変更します

<img style="position: absolute; left:0; top: 0;" border="0" src="images/gen.jpg" usemap="#Map1">

このようなものに

<img id="myMap" src="images/gen.jpg" usemap="#Map1">

そしてCSSファイルに追加します

#myMap {
position: absolute;
left:0; 
top: 0;
border:0;
z-index:-999;
}

ここに完全なコード:http://pastebin.com/3HnhkJ8x-IEではテストされていない最新バージョンのChromeとFirefoxでテストされています。

推奨される解決策

次のような、かなり前に落胆した手法を使用しています。

  • 画像マップ
  • フォーマットの目的で使用されるテーブル

また、インラインCSSと別のCSSファイルを混在させています。どうやら、PHPを使用して別のHTMLファイル内にHTMLファイルを含めており、各ファイルには独自のタグがあります。

HTMLとCSSの知識を研究して改善し、業界のベストプラクティスを学ぶことを強くお勧めします。

于 2013-01-22T16:07:29.017 に答える
0

画像上でposition:absoluteを使用しています。z-index:1を追加します。次に、残りを絶対的なコンテナでラップし、z-index:2を指定します。

編集

1ページのソリューション、まだ悪い形式ですが、:

<html>
<head> 
    <style>

    A:link
     { text-decoration: none; color: black; cursor:crosshair; }
     A:visited
     { text-decoration: none; cursor:crosshair; color: black; }
     A:active
     { text-decoration: none; cursor:crosshair; color:black; }
     A:hover {
     text-decoration: none; color: #705551; background-color:black; font weight:none; cursor:help;}

     body 
    { background: #c0c2c3; 
    font-family: georgia; 
    color: #4a458d; 
    font-size: 10pt;
     cursor: s-resize;


    }

    td
     { font-family: Verdana;
     font-size: 10px; 
    color: #4a458d; 
    cursor: crosshair; 
    text-align: left;
     margin: 0px;}
     }

     .imap{
         position: absolute; left:0; top: 0; z-index:1;
     }
     .pgwrap{
         position:absolute; left:0; top: 0; z-index:2;
     }

    </style>
</head>
<body>
    <div class="pgwrap">
        <div class="imap">
         <img style="" border="0" src="images/gen.jpg" usemap="#Map1">
         <map id="Map1" name="Map1">
         <area shape="rect" coords="136,331,211,351" name="home" a href="home.php">
         <area shape="rect" coords="136,379,244,400" name="aboutus" a href="aboutus.php">
         <area shape="rect" coords="136,426,247,447" name="calculate" a href="">
         <area shape="rect" coords="136,475,262,495" name="contactus" a href="">
         </map>
        </div>

        <form method="post" action="checklogin.php">
         <table width="450" height="88" border="0" align="left">
         <tr>
         <td width="180">Enter your email</td>
         <td width="270">
         <input name="email" type="text" size="30" /></td>
         <tr>
         <td>Enter your password</td>
         <td><input type="password" name="password" size="30" /></td></tr>
         </tr>
        <tr><td colspan="2"><input type="submit" name="Submit" value="Login" /></td></tr></table>


        </form>

    </div>
</body>

これは私が話していたものです。

于 2013-01-22T15:54:31.563 に答える