Use iframe as a link?

Question

I use an iframe and in the iframe I load a dynamic image. I want to use this image as a link to the corresponding article. This is actually a news site.

I already used a lot of things like:

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

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

the 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 anyone suggest what to do.

Any help would be appreciated.

---

Iframe loads a dynamic image address, for example:

 <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 can’t add the tag inside, but have already wrapped the tag inside. it worked for IE, but not for others like FF, Safari ..

Answer 1

According to your earlier comments, you used an iframe to crop an image of an unknown size in a 60 by 90 pixel field. To do this, use the overflow:hidden css attribute in the a tag, which cuts off any content that does not fit the frame.

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

Answer 2

You can create an overlay to make the area above the iframe interactive. It 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/

Answer 3

Why don't you onClick <iframe> inside the <div> and add the onClick event to the containing <div> to go to the user on the page you want?

 <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 was a clickable link.

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

Answer 4

If the iframe loads an HTML page, just put the <a> tags in the source of this.

If you just upload an image, why don’t you use the <img> ?

Answer 5

I would recommend using jQuery to select an image element in this iframe and wrap it with an <a> tag so that it is clickable.

I believe that you can connect the 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*/ }); 

Answer 6

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 for IE8. Hope this helps :)

Answer 7

I ran into such a problem and decided:

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