Trying to make epaper dynamic using C# asp.net web form

Refresh

April 2019

Views

110 time

2

I have static e paper but i want to develop dynamic e-paper like below url

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

I have no idea to start e paper dynamic below is my whole html code

   <!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/[email protected]" 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/[email protected]" class="icon-right" alt="" id="next-img">
          </div>

         </div>



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


           </body>

below my website live url

http://hktimes.co.nf

i am not getting any idea to implement dynamic, i have to take repeater control or grid view control to achieve dynamic e paper. How to handle MAP and image redirection.

1 answers

0

If you take a closer look at your desired result, you will see they have a single image, overlapped with divs. Those were manually defined, meaning for each image someone defined the are of the "target" and on click, a new window will open with only that area. Implementing this is relatively simple. An image inside a container, also inside the same container a bunch of divs with position:relative. Now, if what you want is all the process be done automatically I would suggest you to start looking into pattern recognition/machine learning.