嘗試使用C＃asp.net Web表單使epaper動態化

Question

我有靜態電子紙，但我想開發動態電子紙，如以下網址

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重疊。 這些是手動定義的，這意味着對於每個定義了“目標”區域的圖像，單擊后，將僅打開該區域的新窗口。 實施起來相對簡單。 容器內的圖像，也位於同一容器內的一堆div，其position:relative 。 現在，如果您想要的是自動完成所有過程，建議您開始研究模式識別/機器學習。

嘗試使用C＃asp.net Web表單使epaper動態化

問題描述

1 個解決方案

解決方案1
4 已采納 2019-04-24 17:50:19

嘗試使用C＃asp.net Web表單使epaper動態化

問題描述

1 個解決方案

解決方案1 4 已采納 2019-04-24 17:50:19

解決方案1
4 已采納 2019-04-24 17:50:19