Anil Anil - 3 months ago 12
HTML Question

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

Answer

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