私のウェブサイトでは、以下に示すように画像をマッピングしました。
<div style="text-align:center; width:1298px; margin-left:auto; margin-right:auto;">
<img id="img2" src="http://mk7vrlist.altervista.org/pictures/sfondogs.png" usemap="#img2" border="0" width="1298" height="660" alt="" />
<map id="_img2" name="img2">
<area shape="rect" coords="35,26,110,99" href="http://mk7vrlist.altervista.org/databases/application.html" alt="" title="If we are recruiting, you can ask for join our staff." />
<area shape="rect" coords="1181,27,1256,100" href="http://mk7vrlist.altervista.org/databases/sendrecord.html" alt="" title="Send us your VRs." />
</map>
</div>
マッピングされた画像の前にテキスト領域を配置したいので、z-indexプロパティを使用できます。
img
{
position:absolute;
z-index:-1;
}
本文にはテキストエリア (id="txtarea") があります。ちなみに、マップされた画像は画面の中央に配置されていません。私たちを手伝ってくれますか？<body background="/persbg.jpg">ページの背景として使用しています。