Use iframe as a link?

Why don't you enclose <iframe> inside a <div> and add an onClick event on the containing <div> to navigate the user to the desired page?

<div onClick=""> <!-- Or just bind 'click' event with a handler function -->
  <iframe ...></iframe>
</div>

By adding the following css rule, it will work as if the iframe were a clickable link.

div {
  cursor: pointer
}

iframe {
  pointer-events: none; // This is needed to make sure the iframe is not interactive
}

You could create a overlay to make the area over a iframe clickable. This worked for me.

<div style="position:relative;">
<iframe src="somepage.html" width="500" height="500" />
<a href="redirect.html" style="position:absolute; top:0; left:0; display:inline-block; width:500px; height:500px; z-index:5;"></a>
</div>

I found this code snippet from this thread here: https://forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/


According to your earlier comments, you were using the iframe in order to crop an image of unknown size to a 60 by 90 pixel box. To do this, use the overflow:hidden css attribute on the a tag, which slices off any content not fitting within the border-box.

<div class="news_img01">
    <a href="URL"
       style="display: block; width:90px; height:60px; overflow:hidden;">
        <img src="thumbnails/1188.gif" />
    </a>
</div>

Tags:

Html