CODEWITHSUNDEEP
html
Anil
Anil

Reputation: 229

Use iframe as a link?

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..

Upvotes: 20

Views: 52387

Answers (8)

M Andhika Bagaskara
M Andhika Bagaskara

Reputation: 96

Set css property pointer-events to none on iframe tag.

a {
  display : block; /* or inline-block */
}
a iframe {
  pointer-events : none;
}
<a href="https://stackoverflow.com/questions/3317917/use-iframe-as-a-link">
    <iframe src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</a>

Upvotes: 7

Eric
Eric

Reputation: 97571

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>

Upvotes: 9

mc9
mc9

Reputation: 6349

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
}

Upvotes: 7

ScottyG
ScottyG

Reputation: 3410

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/

Upvotes: 29

Zaman-A-Piri Pasa
Zaman-A-Piri Pasa

Reputation: 419

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;
}

Upvotes: 0

RedApple Freelancer
RedApple Freelancer

Reputation: 1

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 :)

Upvotes: 0

Peter Perh&#225;č
Peter Perh&#225;č

Reputation: 20782

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*/ });

Upvotes: 0

DanSingerman
DanSingerman

Reputation: 36502

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?

Upvotes: 0

Related Questions