To have a picture (eg. in jpg format) on a webpage that acts as a link I can do something like
<a href="https://www.link.com/">
<img src="test.jpg" style="width:300px;height:500px;">
</a>
This does not work if the picture is a PDF.
Similar to above, I just want to be able to click anywhere on the PDF to get to the link.
Note that the PDF itself doesnt have any hyperlinks on it. Tried various ways and found that hyperlinks on the PDF become active, but cant click on the whole page.
Dont want to convert the PDF into image formats since I lose resolution.
Just to clarify, I do NOT want the link to retrieve the PDF. I want the PDF displayed straight away and go somewhere else if it is clicked.
Any ideas?
You can overlay it with the link with a higher z-index
<div style="position: relative; width: 300px; height: 500px; border:1px solid black;">
<iframe src="your-document.pdf"
style="width:100%; height:100%; border:none;"></iframe>
<a href="your-document.pdf" target="_blank"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10;">
</a>
</div>
/* Proof of concept - you can ignore this script */
document.querySelector('a').addEventListener('click', (e) => {
console.log(e.target.href);
})<div style="position: relative; width: 300px; height: 500px; border:1px solid black;">
<iframe src="your-document.pdf" style="width:100%; height:100%; border:none;"></iframe>
<a href="your-document.pdf" target="_blank" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10;">
</a>
</div>