Use iframe as a link?

Question

I am using an iframe and in the iframe I am loading a dynamic image. I want to use that image as a link to the respective article. Actually this is a news site.

I already have used many stuffs like:

<a href="whatever.."><iframe src="dynamic url"></iframe></a>

does work with IE but not with safari and FF.

and

some tweets like

div.iframe-link {
    position: relative;
}
a.iframe-link1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

code:

<div class="iframe-link">
    <iframe src="file" width="90px" height="60px" frameborder="0" scrolling="no"
     marginheight="0" marginwidth="0" allowtransparency="true" noscaling="true">
    </iframe>
    <a href="url" target="_top" class="iframe-link1"></a>
</div>

worked in FF and Safari not in IE7,8.

SO can anybody suggest what to do..

any help would be appreciated.

The Iframe is loading a dynamic address of image like::::

<div class="news_img01">
    <div onclick="window.open('URL','_self')" style="cursor: pointer;"><br>
        <iframe scrolling="no" height="60px" frameborder="0" width="90px" noscaling="true" allowtransparency="true" marginwidth="0" marginheight="0" src="thumbnails/1188.gif">
        </iframe>
    </div>
</div>

so i cant add tag inside but already wrapped tag inside . it worked for IE but not for others like FF, Safari..

Not for this specific question, but the approach in [html - How to force link from iframe to be opened in the parent window - Stack Overflow](https://stackoverflow.com/questions/1037839/how-to-force-link-from-iframe-to-be-opened-in-the-parent-window) should also work. — user202729, Aug 17 '21 at 14:54

score 27 · Answer 1 · answered Jun 06 '14 at 20:56

27

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/

answered Jun 06 '14 at 20:56

ScottyG

2,948
1
29
42

1

Had a problem where the only way to load content in was via an iframe... this fixed the issue of making the iframe behave like a link. A nasty hack - but a very good one :) thanks! – Rob Dec 16 '14 at 09:14

Eric · Accepted Answer · 2020-01-17T12:47:33.347

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>

score 7 · Answer 3 · answered Feb 16 '16 at 09:59

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
}

score 0 · Answer 4 · answered Oct 24 '13 at 16:05

I have the same problem and I solved it with this code:

div.iframe-link {
position: relative;
float: left;
width: 960px;
height: 30px;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
opacity: 0.1;
filter:Alpha(opacity=10);
}

For me,it works for all browsers and IE8 as well. Hope it helps :)

score 0 · Answer 5 · answered Jan 17 '14 at 07:43

0

I faced such type of problem and solved by this:

a.iframe-link1 {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    width:90px;
    height:60px;
    z-index:5;
}

answered Jan 17 '14 at 07:43

Zaman-A-Piri Pasa

419
5
8

score 0 · Answer 6 · answered Jul 23 '10 at 12:06

0

If the iframe is loading an HTML page, just put your <a> tags in the source of that.

If it is just loading an image, why are you not using an <img> tag?

answered Jul 23 '10 at 12:06

DanSingerman

35,232
13
78
92

But i cant change that page... beacuse this is other site sending image.... I simply wanna make this image clickable... – Anil Jul 23 '10 at 12:32
2

If the other site is just providing an image, why not put use that in the img's src attribute? – ThatBlairGuy Jul 23 '10 at 12:46
the images are dynamic in size.so i only need to display upper left 90X60 size image. rest part automatically should cut off. thats the rest i used iframe not to distort the image. I need small part but clear part. Thanxx for reply – Anil Jul 23 '10 at 13:01
@user400210 - then you could use inline CSS: give your `` a `display:block` property, `width:90px;height:60px;` and a `background-image` which refers to the other site. – Richard JP Le Guen Jul 23 '10 at 13:08
See my updated answer for a similar method without using background-images. – Eric Jul 23 '10 at 13:22
Thanxx Guys ...It worked............. Thanks so so much.... By the way it took my lots of time... Once again thanks.. – Anil Jul 23 '10 at 13:36

Peter Perháč · Answer 7 · 2010-07-23T13:00:34.433

0

I would recommend using jQuery to select the image element in that iframe and wrap it with <a> tag so it's clickable.

I believe it's possible to attach an onHTMLReady listener to the document inside the iframe. Then wait for the iframe to load and then make the image clickable

$(frames[0].document).ready(function(){ /*find and wrap with a-tag goes here*/ });

edited Jul 23 '10 at 13:00

answered Jul 23 '10 at 12:52

Peter Perháč

20,064
21
117
151

I am newbie in Jquery. Can you please Elaborate. – Anil Jul 23 '10 at 13:04

Use iframe as a link?

7 Answers7

Linked