Question

我有静态电子纸，但我想开发动态电子纸，例如url

https://epaper.dawn.com/?page=15_04_2019_001

我不知道如何动态启动电子报，以下是我的整个html代码

   <!doctype html>
   <html>
   <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>q Times</title>

  <link rel="stylesheet" href="css/main.css">
  <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
   <style>
  body { background-color: #fafafa; min-height: 100vh;}
 .container { margin: 200px auto; max-width: 600px; }
  </style>

 <script src="jquery.min.js"></script>

 <script src="jquery.maphilight.min.js"></script>

 <script>

    $(document).ready(function () {
    $("#prev-img,").click(function () {
    //alert($('#show-img').attr('src'));
    var x=$('#show-img').attr('src');
    if(x=='images/1.jpg')
    {
     document.getElementById("show-img").useMap="#enewspaper"

    }
    else if(x=='images/2.jpg')
    {
    document.getElementById("show-img").useMap="#enewspaper1"

    }           
   });



      })
     </script>


     <script>

     $(document).ready(function () {
     $("#next-img,").click(function () {
    //alert($('#show-img').attr('src'));
    var x=$('#show-img').attr('src');
    if(x=='images/1.jpg')
    {
    document.getElementById("show-img").useMap="#enewspaper"

    }
    else if(x=='images/2.jpg')
    {
    document.getElementById("show-img").useMap="#enewspaper1"

    }   

    });



    })
      </script>
     <script type="text/javascript">
    $(function () {
        $(".map").maphilight()
        $(".icon-right,.icon-left,#small-img-roll img").click(
            function () {
                $("div.map img").css("opacity", 1);
                $(".map").maphilight()
                <!--var x = document.getElementById("1").useMap = "#enewspaper";  -->

                 var value = $(this).attr("usemap")

                   if(value==1)
                   {

                 document.getElementById("show-img").useMap="#enewspaper"

                var x = document.getElementById("show-img").useMap;

                  $(".map").maphilight()
                   }
                   else if(value==2)
                   {

                  document.getElementById("show-img").useMap="#enewspaper1"
                    var x = document.getElementById("show-img").useMap;

                  $(".map").maphilight()
                   }
                   }


                    )

                   })


                </script>

                 </head>
                 <body>

                  <div class="container" style="margin-top:0px">


                 <!--<div class="show" href="images/1.png" usemap="#enewspaper">-->
                 <img src="images/1.jpg" id="show-img"  class="map" usemap="#enewspaper" >
                <map name="enewspaper">

               <area shape="rect" alt="" title="" coords="34,136,562,221" href="" target="" />
               <area shape="rect" alt="" title="" coords="372,229,574,468" href="www.google.com" target="" />
              <area shape="rect" alt="" title="" coords="104,227,368,469" href="www.fb.com" target="_New" />
              <area shape="rect" alt="" title="" coords="105,472,230,677" href="www.kk.com" target="" />
               </map>

               <map name="enewspaper1">
               <area shape="rect" alt="" title="" coords="34,136,562,221" href="" target="" />

               </map>

              <div class="small-img">
              <img src="images/online_icon_right@2x.png" class="icon-left" alt="" id="prev-img">
             <div class="small-container">
             <div id="small-img-roll">


            <img src="images/1.jpg" class="show-small-img" alt="1" usemap="1">
            <img src="images/2.jpg" class="show-small-img" alt="2" usemap="2">

           </div>
           </div>
           <img src="images/online_icon_right@2x.png" class="icon-right" alt="" id="next-img">
          </div>

         </div>



            </div>
             <script src="scripts/zoom-image.js"></script>
           <script src="scripts/main.js"></script>


           </body>

我没有实现动态的任何想法，我必须采用中继器控制或网格视图控制来实现动态电子纸。如何处理MAP和图像重定向。

Answer 1

如果仔细查看所需的结果，您会看到它们只有一张图像，并与div重叠。这些是手动定义的，这意味着对于每个定义了“目标”区域的图像，单击后，将只打开该区域的新窗口。实施起来相对简单。容器内的图像，也是同一容器内带有position:relative的一堆div的图像。现在，如果您想要的是自动完成所有过程，建议您开始研究模式识别/机器学习。

尝试使用C＃asp.net网络表单来使epaper动态化

1 个答案: