title: In an html page,how to display the first page of a pdf document as the icon?
body: <p>I have used the following code to display a list of PDF files in an HTML page. I want to display the first page of every PDF file as the image icon for them. I am not using any servers as of now. Please guide me on this.
  Code goes here: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link href="assets/css/bootstrap-responsive.css" rel="stylesheet"&gt;
  &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
  &lt;link type="text/css" href="cssjquery/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" /&gt;
  &lt;title&gt;Unit 3, ADS&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .imagewrap {
      display: inline-block;
      position: relative;
  }
  
  .btn {
      position: absolute;
      top: 0;
      right: 0;
  }
  
  &lt;/style&gt;
  
  
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jsjquery/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jsjquery/jquery-ui-1.8.24.custom.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){ 
  $('a.btn').on('click',function(e){
      e.preventDefault();
      pdfID = $(this).closest('.imagewrap')[0].id;
      $('#dialog').dialog('open');
    alert('Deleting '+pdfID+'');
     $(this).closest('.imagewrap')
          .fadeTo(300,0,function(){
              $(this)
                  .animate({width:0},200,function(){
                      $(this)
                          .remove();
                  });
          });   
  });
  }); 
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;h1&gt;PDF Files&lt;/h1&gt;
  &lt;br&gt;&lt;br&gt;
      &lt;div class="imagewrap" id="pdf1"&gt;
          &lt;a href="something1.pdf"&gt;&lt;img src="pdf icon.jpg" width="100" height="100" border="0"&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a class="btn" href="#"&gt;&lt;i class=" icon-remove-sign" &gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="imagewrap" id="pdf2"&gt;
          &lt;a href="something2.pdf"&gt;&lt;img src="pdf icon.jpg" width="100" height="100" border="0"&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a class="btn" href="#"&gt;&lt;i class=" icon-remove-sign" &gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;div class="imagewrap" id="pdf3"&gt;
          &lt;a href="something3.pdf"&gt;&lt;img src="pdf icon.jpg" width="100" height="100" border="0"&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a class="btn" href="#"&gt;&lt;i class=" icon-remove-sign" &gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>P.S. : I have added imagewrap class to each div here because I was not able to add the remove icon to every pdf icon image otherwise.</p>
  
  <p>Any help would be greatly appreciated.
  Thanks in advance</p>