CODEWITHSUNDEEP
htmlpdfhyperlink
Martin Parenteau
Martin Parenteau

Reputation: 73731

PDF embedded in HTML: use as hyperlink

I have a PDF embedded in an HTML page (actually, it is an ASPX form). The PDF is shown in a small "embed" HTML element, making it look like a thumbnail. Now, I would like to use it as a hyperlink that would show the same PDF at full size. Is there a way to make the embedded PDF act as a hyperlink or am I asking for too much?

Here is the relevant HMTL:

<embed id="framePdfPreview" runat="server" width="200" height="255" />

And the server code that sets the PDF dynamically:

framePdfPreview.Attributes("src") = myPdfUrl & "#toolbar=0&navpanes=0&scrollbar=0"

Upvotes: 0

Views: 2120

Answers (1)

Eduardo Ponce de Leon
Eduardo Ponce de Leon

Reputation: 9696

Little experiment, I have never tried wrapping an <embed> with a <div> for this purpose, but theoretically it should work:

<div onclick="javascript: window.open('myPdfUrl ','Window Name')">
   <embed id="framePdfPreview" runat="server" width="200" height="255" />
</div>

This works, 100% tested for the division itself, I just hope that the browser will recognize your embeded pdf as part of the <div> if not you can also adjust the height and width of the division to the same of the pdf to make sure that the "link" covers the complete area of the pdf.

<div style="width:200px; height:255px" onclick="javascript: window.open('myPdfUrl ','Window Name')">
   <embed id="framePdfPreview" runat="server" width="200" height="255" />
</div>

We can try adding a division over the embeded PDF. Get the exact position of the pdf and create a division of the same size with absolute position and the left and top values to mathc the pdf position, add z-index:9999 and add to this new division the onclick property. Note that the pdf is outside the new div.

    <div style="width:200px; height:255px; z-index:99999; position:absolute; left:?px; top:?px" onclick="javascript: window.open('myPdfUrl ','Window Name')">&nbsp;</div>
    <div id="pdf"><embed id="framePdfPreview" runat="server" width="200" height="255" /></div>

Upvotes: 1

Related Questions