...

View Full Version : Replication of <iframe src url> in a new browser window upon clicking iframe



Mike Collins
12-22-2006, 09:38 AM
I have the code below for Iframe

<iframe src="http://www.google.com" height="400"
width="300">
</iframe>

I want to click on the Iframe and have a new window open as a result, not inside the iframe, but outside the iframe, with the same url as shown in the iframe.

I try using the code <urlTarget>_blank</urlTarget>

like this


<iframe src="http://www.google.com" height="400"
width="300" <urlTarget>_blank</urlTarget> >
</iframe>


but it does not work, i also tried other variatons of code such as:

<IFRAME src="http://www.ebay.com" width="400" height="500"
scrolling="auto" frameborder="1">
<A href="http://www.ebay.com"></A>
</IFRAME>


but it still does not work.

Please, Does anyone know how to do this? :confused:

harbingerOTV
12-23-2006, 04:14 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>???</title>
<style type="text/css">
a {
position: relative;
width: 400px;
height: 500px;
display: block;
}
span.frame {
/*background: transparent;*/
background: #d9c;
position: absolute;
width: 384px;
height: 484px;
top: 0;
left: 0;
z-index: 2;
display: block;
-moz-opacity: .30;
}

</style>

</head>
<body>
<a href="http://www.ebay.com" target="_blank"><span class="frame"></span>
<IFRAME src="http://www.ebay.com" width="400" height="500"
scrolling="auto" frameborder="1">
</IFRAME>
</a>
</body>
</html>


a little hacky but it kind of sound slike what you want is hacky too ;)

deal with this wrapping the iframe in a link doesnt work ecause only the border will be clickable. so to remedy this (but make another problem rear up) I relatively positioned the link allowing me to slap a span inside of it and absolutely position it over the frame. I used a opacity (only in mozilla for my test) to show the span over the frame. problem was that the span made the scrolling useless as it was over it. so I chopped off 16px on the sides so you can still scroll the frame. all the content of the frame is useless but anywhere they click on it will take them to the site in the frame.

so if you use this example just turn off the opacity of the span and voila!

tested in FF1.5 and IE6. does not work in opera 8. told you it was hacky but it's a start?

Mike Collins
12-27-2006, 10:13 PM
Hey thank you so much I am going to try it out right away! I really appreciate it and I hope you had a Merry Christmas and have a Happy New Year!

Mike Collins
12-28-2006, 12:18 AM
Hey, thanks for the help. I have one question, do you know why in I.E. the image is not transparent? Check it out at this link: www.powerizerz.com/trans.html

It works fine in Mozilla 2.0 but for some reason in I.E. it shows purple and you cannot see what is beneath the image. if you have any idea why please let me know.

Thanks

Arbitrator
12-28-2006, 12:39 AM
-moz-opacity, as the name implies, only works in browsers using the Mozilla engine, such as Firefox. Firefox, along with Opera, now supports the CSS3 opacity property though, so you should be using that instead of -moz-opacity.

You need to use a Microsoft‐only declaration for opacity variations in Internet Explorer: filter: alpha(opacity=30).

harbingerOTV
12-29-2006, 11:04 PM
Glad it sort of worked.

I used the opacity just so I could see exactly where the span was sitting over the iframe. Since I built it in FF, I just checked IE to see if things were working. Didn't really need the opacity.



span.frame {
/*background: transparent;*/
background: #d9c;
position: absolute;
width: 384px;
height: 484px;
top: 0;
left: 0;
z-index: 2;
display: block;
-moz-opacity: .30;
}


the commented out background: transparent was what i had in there ofr starters but just needed to see itbetter.

one thing I did learn about all this is that IE gives select boxes a z-index: infinity. Thats why on your link th eselct box is still usable and the opaque purple doesn't cover it up. Better to probally take it off completely but not my call. Opera gives a z-index: infinity to an Iframe and that's why it doesn't work for Opera at all.

have fun.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum