我想在翻页效果中图片上放文字

那就加吧，
这是我加层的代码：
<div id='mask'></div>
我想在翻页效果内放入文字，但是不要用PS的方法吧文字直接加入进图片，我以后修改没办法改了。这样说清楚了吧。
<!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=imagetoolbar content=no>
<STYLE type=text/css>
#center {
POSITION: absolute;
left: 180px;
width: 722px;
height: 442px;
top: 111px;
z-index: auto;
}
#DHTMLBOOK {
BACKGROUND: #000000; LEFT: 115px; VISIBILITY: hidden; WIDTH: 722px; POSITION: absolute; TOP:-69px; HEIGHT: 468px
}/*电子书大小，位置*/
.page {
OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%
}/*电子书边框颜色，粗细*/
.right {
BORDER-RIGHT: #000000 1px solid; LEFT: 50%
}/*翻页大小*/
.turn {
background-color: #000000
}/*电子书翻页时的填充色*/
.img {/*电子书显示画面的大小*/
WIDTH: 200%;
POSITION: absolute;
HEIGHT: 100%;
overflow: visible;
}
.STYLE2 {
position:absolute;
left:1071px;
top:53px;
width:227px;
color:#000000;
line-height:30px;
height: 501px;
font-family:"华文新魏";
font-size:18px;
}
.STYLE3 {
font-family: "新宋体";
font-size: 24px;
position:absolute;
left: 41px;
top: 385px;
width: 174px;
height: 45px;
}
.STYLE4 {
color: #0000FF;
position:absolute;
left: 38px;
top: -178px;
}
.STYLE5 {
font-family: "新宋体";
font-size: 24px;
position:absolute;
left: 41px;
top: 648px;
width: 174px;
height: 45px;
}
.STYLE6 {
color: #FF0000;
position:absolute;
left: 37px;
top: -183px;
}
body {
background-color: #FFCC66;
}
</STYLE>
<SCRIPT type=text/javascript>

</SCRIPT>
<script language="javascript">
var IMGSRC;
function titLe(p) {//显示图片提示信息
document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
};
    function d(id){
    document.getElementById(id).style.visibility="visible"
}
function h(id){
    document.getElementById(id).style.visibility="hidden"
}
function show(id){//定义ID的值
    IMGSRC  = document.getElementById(id).getElementsByTagName("img");
    DB      = document.getElementById("DHTMLBOOK");
P01     = DB.getElementsByTagName("span")[0];//返回数组第0位
P01i    = P01.getElementsByTagName("img")[0];//返回数组第0位
P02     = DB.getElementsByTagName("span")[1];//返回数组第1位
P02i    = P02.getElementsByTagName("img")[0];//返回数组第0位
P1      = DB.getElementsByTagName("span")[2];//返回数组第2位
P1i     = P1.getElementsByTagName("img")[0];//返回数组第0位
P2      = DB.getElementsByTagName("span")[3];//返回数组第3位
P2i     = P2.getElementsByTagName("img")[0];//返回数组第0位
n1      = IMGSRC.length;
P1i.src = IMGSRC[n2].src;
P2i.src = IMGSRC[n2].src;
titLe(n2);
DB.style.visibility = "visible";
}
</script>
<META content="MSHTML 6.00.6000.16809" name=GENERATOR><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></HEAD>
<BODY><table width="1293" height= "529" border="1" align="left" cellpadding="0" cellspacing="0" bordercolor="#FFCC66" bgcolor="#FFFFFF">
  <tr>
    <td width="230" height="243" align="center" bgcolor="#FFCC66"><img name="Pic1" src="file:///D|/index/image/1.jpg" width="230" height="200" onclick="show('NO1');d('NO3')" style="cursor:pointer" onmouseover="d('NO5');d('NO3');h('NO4')" onmouseout="h('NO5');h('NO3');h('NO4')"/>
      <div class="STYLE3" id="NO5" style="visibility:hidden">
      <div align="center" class="STYLE4">第一本书</div>
    </div></td>
    <td width="772" rowspan="2"><DIV id=center>
<DIV id=DHTMLBOOK>
<SPAN class=page onMouseDown= "return false;" ondblclick= TPL(); onclick= TPL();>
<IMG class=img></SPAN>
<SPAN class="page right" onMouseDown= "return false;" ondblclick= TPR(); onclick= TPR();>
<IMG class=img style="LEFT: -100%"></SPAN>
<SPAN class="page turn" onMouseDown= "return false;" ondblclick= TPL(); onclick= TPL();>
<IMG class=img style= "FILTER: alpha(); opacity: 1"></SPAN>
<SPAN class="page turn right" onMouseDown="return false;" ondblclick=TPR(); onclick=TPR();>
<IMG class=img style= "FILTER: alpha(); LEFT: -100%; opacity; 1"></SPAN>
<DIV id=TXTBOX></DIV></DIV></DIV>
<DIV id="NO1" style="display:none"><img src="image/1.jpg" width="100" height="100"><img src="image/2.jpg" width="100" height="100"><img src="image/3.jpg" width="100" height="100"><img src="image/4.jpg" width="100" height="100"><img src="image/5.jpg" width="100" height="100" /><img src="image/6.jpg" width="100" height="100" /></DIV>
<DIV id="NO2" style="display:none"><img src="image/11.jpg" width="100" height="100"><img src="image/12.jpg" width="100" height="100"><img src="image/13.jpg" width="100" height="100"><img src="image/14.jpg" width="100" height="100"><img src="image/15.jpg" width="100" height="100" /><img src="image/16.jpg" width="100" height="100" /></DIV></td>
    <td  width="223" rowspan="2" bgcolor="#FFCC66">
<div id="NO3" style="visibility:hidden" class="STYLE2">
      <dr>Title:JavaScript: The Definitive Guide, 5th Edition </dr>
  <dr>By: David Flanagan </p><p>Publisher:O'Reilly Media </dr>
  <dr>Formats:Print  Ebook  Safari Books Online</dr>
  <dr>Print: August 2006 </p><p>Ebook: December 2008 </dr>
  <dr> Print ISBN:978-0-596-10199-2 | ISBN 10:0-596-10199-6</dr>
  <dr>Ebook ISBN:978-0-596-15819-4 | ISBN 10:0-596-15819-X</dr></div>
  <div id="NO4" style="visibility:hidden" class="STYLE2">
   <dr>Title:Jquery: The Definitive Guide, 5th Edition </dr>
   <dr>By: David Flanagan </p><p>Publisher:O'Reilly Media </dr>
   <dr>Formats:Print  Ebook  Safari Books Online</dr>
       <dr>Print: April 2010 </p><p>Ebook: January 2010 </dr>
       <dr>Print ISBN:999-9-555-12123-4 | ISBN 13:1-222-45678-1</dr>
       <dr>Ebook ISBN:999-9-555-12123-4 | ISBN 13:1-222-45678-1</dr>
    </div></td>
  </tr>
  <tr>
    <td height="284" align="center" bgcolor="#FFCC66"><img name="Pic2" src="file:///D|/index/image/16.jpg" width="230" height="200" onclick="show('NO2');d('NO4')" style="cursor:pointer" onmouseover="d('NO6');d('NO4');h('NO3')" onmouseout="h('NO6');h('NO4');h('NO3')"/>
      <div class="STYLE5" id="NO6" style="visibility:hidden">
      <div align="center" class="STYLE6">第二本书</div>
    </div></td>
  </tr>
</table>
</body>
</html>

调试易

我想在翻页效果中图片上放文字

解决方案 »