I am creating a online tech manual, which contains 250+ PDF drawings all linked via html code.
Due to the large amount of drawings in the manual, I would like to be able to OnHover preview the PDF drawing files before clicking on it to open it in a separate tab, thus saving on multiple tabs open of incorrect manual drawings.
Is this possible
Example of my original links to open up a drawings as per below
li><a href="tech_lib/Dwgs/GAs/25237r0.pdf">25237r0 Assembly GA</a></li>
li><a href="tech_lib/Dwgs/GAs/25238r0.pdf">25238r0 Tool GA</a></li>
I came across the following web page / for adding a preview to webpage links
and so amended the first line of HMTL code to following
<li><a href="tech_lib/Dwgs/GAs/25237r0.pdf">25237r0 Assembly GA</a>
<div class="box"><iframe src="tech_lib/Dwgs/GAs/25237r0.pdf"
width = "450px" height = "500px"></iframe></div></li>
and added the following code to my CSS page
.box {
display:none;
position: absolute;
z-index: +100;
left: 50px;
}
a:hover + .box {
display:block;
}
but am unable to preview the PDF before clicking on the drawing to open.
Thanks in advance
I am creating a online tech manual, which contains 250+ PDF drawings all linked via html code.
Due to the large amount of drawings in the manual, I would like to be able to OnHover preview the PDF drawing files before clicking on it to open it in a separate tab, thus saving on multiple tabs open of incorrect manual drawings.
Is this possible
Example of my original links to open up a drawings as per below
li><a href="tech_lib/Dwgs/GAs/25237r0.pdf">25237r0 Assembly GA</a></li>
li><a href="tech_lib/Dwgs/GAs/25238r0.pdf">25238r0 Tool GA</a></li>
I came across the following web page https://jsfiddle/mcdqt/867/ for adding a preview to webpage links
and so amended the first line of HMTL code to following
<li><a href="tech_lib/Dwgs/GAs/25237r0.pdf">25237r0 Assembly GA</a>
<div class="box"><iframe src="tech_lib/Dwgs/GAs/25237r0.pdf"
width = "450px" height = "500px"></iframe></div></li>
and added the following code to my CSS page
.box {
display:none;
position: absolute;
z-index: +100;
left: 50px;
}
a:hover + .box {
display:block;
}
but am unable to preview the PDF before clicking on the drawing to open.
Thanks in advance
Share Improve this question edited 11 hours ago TGA69 asked 11 hours ago TGA69TGA69 11 bronze badge New contributor TGA69 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1- Firstly it is not possible to "preview" a compiled binary PDF (same as a zipped DocX) as it needs a PDF viewer to decompile into text to be drawn as visual pixels and vectors Thus NO SUCH THING as a PDF "pre-view" they can only be POST-viewed or a "viewed file POST download" what you can preview is a JPG or other downloaded image/thumbnail after extracting the content of a page. – K J Commented 10 hours ago
1 Answer
Reset to default 0A PDF cannot be "Pre-Viewed" as it need to be decompressed and decompiled after download, but a smaller image of a PDF page can be downloaded instantly to give such an effect. There are many command line tools to export a folder of PDF to a page 1 thumbnail image quickly such as pdftopng.
Thus from your example code a collection of "single line entries" with each reference an image and PDF filename is simple to export by cmd line echo [1], or similar forfiles/for loop, "one line at a time" methods.
<head><style> .box { display: none; position: absolute; z-index: +100; left: 50px;} a:hover + .box { display: block; } </style></head>
<body>
<a href="onHover.pdf">onHover.pdf</a> <div class="box"> <iframe src="onHover.png" width="416px" height="588px" ></iframe></div><br />
<a href="second.pdf">second.pdf</a> <div class="box"> <iframe src="second.png" width="208px" height="294px" ></iframe></div><br />
... etc.
</body>
On click to download
Nice "bonus feature" is, click the left arrow takes you back to the index page.
[1] NOTE cmd.exe echo of < and > in a batch file requires they be escaped ^< and ^>
Perhaps here too complex for a simple minimal answer.
HOWEVER, when exporting PDF page as an image at a fixed resolution, if the image sizes are variable. That can be detected using VBS or Windows Jscript and then used for variable iFrame sizes.
For hints on both using echo and detecting image sizes see the reverse use in https://github/GitHubRulesOK/SumatraPDF-Plus/blob/master/Plus/jpg2pdf.cmd