如何将epaper划分为多个区域

问题描述：

如何将epaper划分为任意区域，并在鼠标悬停时识别该区域，然后单击以打开它们.我只需要很少的文章就可以实现这一目标.以下是我希望事情如何发生的示例.

http://epaper.thehimalayantimes.com/ [ ^ ]

how to divide epaper in no of the regions and on mouse hover identify the region and on clicking open them. i just need few article on how this is achieved. below is the example how i want the things to be happened.

http://epaper.thehimalayantimes.com/[^]

答

我已经为您创建了一个演示，.. :)

在此演示中，我已将内容和图像url传递给mainDisplay div以显示epaper的内容，
在这里，我已经设置了要显示的主显示div相同的图像url，但是您可以设置大图像url来代替它.. :)

css

i have created one demo for you just check it.. :)

In this demo i have passed content and image url to mainDisplay div to display content of epaper,
here i have set same image url to main display div to display but you can set big image url instead of it.. :)

css

.SideBar
     {
         float: left;
         background-color: Red;
         width:10%;
     }
     .ContantDiv
     {
         width:90%;
         float: left;
         background-color: Yellow;
     }
     #MainDisplay
     {
         height:450px;
         width:100%;

         }

JAVASCRIPT

首先设置在线链接< script type ="text/javascript" src ="http://code.jquery.com/jquery-1.11.1.min.js"></script>

JAVASCRIPT

SET online link first <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

function getimg(image,Content) {

( #MainDisplay").empty();

("#MainDisplay").empty();

( #MainDisplay").append( http:// epaper .thehimalayantimes.com/EpaperImages/362014/362014-md-hr-"+ image +" ss.jpg</img></td></tr>< tr>< td>" +内容+</td></tr>"); }

("#MainDisplay").append("<tr><td><img src="http://epaper.thehimalayantimes.com/EpaperImages/362014/362014-md-hr-"+image+"ss.jpg"></img></td></tr><tr><td>"+Content+"</td></tr>"); }

HTML

<div>
        <div class="SideBar">
            <table>
                <tr>
                    <td>
                        <img class="selected"  önclick="getimg('5','content1');" id="spanthumbNumber5" src="http://epaper.thehimalayantimes.com/EpaperImages/362014/362014-md-hr-5ss.jpg">
                    </img></td>
                </tr>
                <tr>
                    <td>
                        <img class="selected"  önclick="getimg('6','content2');" id="Img1" src="http://epaper.thehimalayantimes.com/EpaperImages/362014/362014-md-hr-6ss.jpg">
                    </img></td>
                </tr>
               
            </table>
        </div>
        <div class="ContantDiv">
        <div id="MainDisplay">
        </div>
        </div>
    </div>

如何将epaper划分为多个区域

相关推荐