报纸查阅

来源：互联网发布：伦桑萧忆情知乎编辑：程序博客网时间：2024/04/27 12:08

<!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=gb2312" />
<title>报纸查阅</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style>
.page{width:709px; height:auto; margin:0 auto;}
.page .prev,.page .next{ width:334px; float:left; text-align:center; cursor:pointer;}
.main{width:709px; height:auto; margin:0 auto;}

</style>
</head>
<script>
//获取热区范围信息
function getOffset(obj) {
    var x = obj.offsetLeft,
    y = obj.offsetTop;
    while (obj.offsetParent) {
        obj = obj.offsetParent;
        x += obj.offsetLeft;
        y += obj.offsetTop;
    }
    return {
        x: x,
        y: y
    };
};
//鼠标划过添加红色边框
function showBorder(obj,a) {
    var img = document.getElementById(a);
    var div = document.getElementById("border");//id名称可以改
    var offset = getOffset(img);
    var coords = obj.coords.split(",");
    div.style.display = "block";
    div.style.left = offset.x + parseInt(coords[0]) + "px";
    div.style.top = offset.y + parseInt(coords[1]) + "px";
    div.style.width = parseInt(coords[2]) - parseInt(coords[0]) + "px";
    div.style.height = parseInt(coords[3]) - parseInt(coords[1]) + "px";
}
//鼠标离开添加红色边框
function hideBorder() {
    document.getElementById("border").style.display = "none";//id名称可以改
}
//以下是上一页下一页按钮
$(document).ready(function(){
//上一个
$(".prev").click(function(){//class名称可以改
   var p=$(".main .myytp");//class名称可以改
   var len=p.length;
    for(var i=0; i<len; i++){
     if (p.eq(i).css("display") == "block" && i==0)
      {
      alert("上一个没有了");//提示文字可以改
      break;
      }else if(p.eq(i).css("display") == "block")
      {
      p.eq(i-1).show().siblings().hide();
      break;
      }
   }
});
//下一个
$(".next").click(function(){//class名称可以改
   var p=$(".main .myytp");//class名称可以改
   var len=p.length;
    for(var i=0; i<len; i++){
     if (p.eq(i).css("display") == "block" && i==len-1)
      {
      alert("已经是最后一个了");//提示文字可以改
      break;
      }else if(p.eq(i).css("display") == "block")
      {
      p.eq(i+1).show().siblings().hide();
      break;
      }
   }
});

});

</script>
<body>

<div class="page">
    <div class="prev"><img src="images/prev.jpg" /></div>
    <div class="next"><img src="images/next.jpg" /></div>
</div>

<div class="main">
  
        <div class="myytp">
            <img src="images/1.jpg" width="709" height="1024"usemap="#bdMap" id="tp1" style="margin:0" border="0" />
            <map name="bdMap" id="bdMap">
                <area shape="rect" coords="166,82,573,168" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
                <area shape="rect" coords="18,154,117,450" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
                <area shape="rect" coords="170,232,317,419" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
                <area shape="rect" coords="363,253,508,398" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
                <area shape="rect" coords="18,80,114,148" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()"/>
              <area shape="rect" coords="33,484,675,849" href="#" onmouseover="showBorder(this,'tp1');" onmouseout="hideBorder()" />
            </map>
        </div>
        <div class="myytp">
            <img src="images/2.jpg" width="709" height="1024" usemap="#Map" id="tp2" border="0"/>
            <map name="Map" id="Map">
                <area shape="rect" coords="69,78,356,222" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
                <area shape="rect" coords="433,119,692,337" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
                <area shape="rect" coords="40,275,332,559" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()"/>
                <area shape="rect" coords="388,405,675,678" href="#" onmouseover="showBorder(this,'tp2');" onmouseout="hideBorder()" />
            </map>
        </div>
        <div class="myytp">
            <img src="images/3.jpg" width="709" height="1024" usemap="#Map1" id="tp3" border="0"/>
            <map name="Map1" id="Map1">
                <area shape="rect" coords="38,191,323,331" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
                <area shape="rect" coords="411,199,670,417" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
                <area shape="rect" coords="26,385,318,669" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()"/>
                <area shape="rect" coords="350,458,637,731" href="#" onmouseover="showBorder(this,'tp3');" onmouseout="hideBorder()" />
            </map>
        </div>

</div>

<div class="page">
    <div class="prev"><img src="images/prev.jpg" /></div>
    <div class="next"><img src="images/next.jpg" /></div>
</div>

<div id="border" style=" display:none; position:absolute;border:2px solid #FF0000; "></div>
</body>
</html>

0 0