1

I have a list of file which contain .psd, .ai, .eps,.pdf in html. I would like to view the file when mouse over the filename. Is it possible to that?

Below snippet is example. 

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}
This live preview for <a href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.
Sh4m
  • 1,424
  • 12
  • 30

1 Answers1

0

Try

<a href="path to your file" class="preview">Link</a><div class="box"><iframe src="" width = "500px" height = "500px" style="display:none;"></iframe></div>

Jquery:

   $(document).ready(function(){
     $(document).on('mouseover','.preview',function(){
var path_source=$(this).attr('href');
$("iframe").attr("src",path_source);
$("iframe").show();

});
 $(document).on('mouseout','.preview',function(){

$("iframe").hide();

});

});
Blesson Christy
  • 380
  • 3
  • 13
  • not working.. once mouse over on the link, it download automatically. not preview the file. – Sh4m Nov 01 '17 at 09:36
  • Using an iframe to "render" a PDF will not work on all browsers; it depends on how the browser handles PDF files. Some browsers (such as Firefox and Chrome) have a built-in PDF rendered which allows them to display the PDF inline where as some older browsers (perhaps older versions of IE attempt to download the file instead). – Blesson Christy Nov 01 '17 at 10:52
  • Read https://stackoverflow.com/questions/19654577/html-embedded-pdf-iframe – Blesson Christy Nov 01 '17 at 10:55