0

我正在使用以 CSS 为中心的书籍图像，并且我需要在书籍的两个面向“页面”上显示两个文本区域作为列。

我还想用 JavaScript 添加这些文本区域，以便可以通过页面底部的 Next 和 Back 按钮更改它们。

我有一个示例页面，您可以查看。

这是页面的 HTML：

<html>
  <head>
     <title>BookPopUp</title>
     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
     <meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)">
     <link rel="stylesheet" type="text/css" href="css/popup.css" />
   </head>
   <body background="images/bg.jpg">
     <div id="bookpop">
     <span></span>
     </div>
   </body>
</html>

这是页面的CSS：

/*website BookPopUp Image Center*/
#bookpop {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    margin: -368.5px auto 0 -512px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */;
    width: 1024px; /* same as the image width */
}
#bookpop span {
    display: block;
    width: 1024px;
    height: 737px;
    margin: 0 auto;
    position: relative;
    background: transparent url(../images/bookpopup.png) 0 0 no-repeat;
    text-indent: -5000em;
    outline: 0;
}

我还想在图片附近或顶部放置两个按钮。他们会说 Next 和 Back 并链接到本书的下一页和上一页。

如果有更简单的方法可以让我知道。

无论如何提前谢谢。

4

3 回答 3

0

让每个人都知道我采纳了你的两个想法（tpaksu | Axente Paul）并将它们添加到我自己的版本中。这是代码，以便其他人可以确切地看到它是如何完成的。

下面的 HTML...

<!DOCTYPE html>
<html lang="en">
  <head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META NAME="ROBOTS" CONTENT="NONE">
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <title>BookPopUp</title>
  </head>
  <body background="images/bg.jpg">
    <div id="bookpop">
      <div>
        <span class="leftpagetext">Hello this is a text to see exactly where all of this is going to go!</span>
        <span class="rightpagetext">Trying to see where this goes as well! Hello this is a text to see exactly where all of this is going to go!</span>
        <img src='images/bookpopup.png'>
      </div>
    </div>
  </body>
</html>

而下面的CSS...

/*website BookPopUp Image Center*/
#bookpop {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    margin: -368.5px auto 0 -512px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */;
    width: 1024px; /* same as the image width */
}
/* Span container class for text Left Side */
.leftpagetext {
    float: left;
    position: absolute;
    top: 120px;
    left: 100px;
    text-align: justify;
    width: 35%;
}
/* Span container class for text Right Side */
.rightpagetext {
    float: right;
    position: absolute;
    top: 120px;
    right: 100px;
    text-align: justify;
    width: 35%;
}

所以再次非常感谢你们俩。现在我知道了，其他看到的人都知道。我打算再写一本这样的书，但要以卷轴的形式写给我妻子的诗。非常感谢你们！

PS 问题是我没有在 div 的 lmao 中使用 div。它刚刚滑过我的脑海，并且在 css span 调用中调用图像也不是一个好主意。

于 2012-05-24T23:03:31.887 回答
0

在图像上放置一个 div，其比例和位置等于图像（覆盖图像）并将文本置于该 div 内。你需要有这样的布局：

<div class='container'>
    <div class='text'>I am the text</div>
    <img src='myimg.png'>
</div>

和CSS：

.container { position: relative; }
.container .text {position:absolute;top:0px;left:0px;
    margin:0px;padding:0px;text-align:center;}
.container img {margin:0px;padding:0px;}

加载时的 javascript 将调整“.text” div 的大小以匹配兄弟图像的宽度和高度。

您需要使用分配给图像的加载方法来获取加载时的实际尺寸。您可以通过在此处搜索“图像加载事件”找到示例。

于 2012-05-24T09:04:16.960 回答
0

为什么不创建 2 个跨度？

<span class="left-page-text"></span>
<span class="right-page-text"></span>

对于 CSS

span{
float: left;
width: 50%; }

如果您想为每个页面提供更多自定义内容，只需使用添加到它们的类。我希望这能帮到您。

于 2012-05-24T09:08:54.093 回答