...

View Full Version : Iframe background color?



le007
12-16-2006, 02:13 AM
<IFRAME SRC="leo.html" margin="0" FRAMEBORDER="0" style="background-color: black;" NAME="main" width="790" height="480" scrolling="--"></iframe>

When I load just a picture into the frame, just simply a jpg as a link into the frame the background is black in mozilla/ff but white in IE?
Any suggestions?
Thanks,
Leo

_Aerospace_Eng_
12-16-2006, 02:36 AM
IE requires that you change the background color on the page in the frame. Since its an image it has no page structure. You'll need to put the image into a webpage of its own.

le007
12-16-2006, 02:56 AM
Thanks, but I can't do that as the jpg is the link for a bigger jpg?

_Aerospace_Eng_
12-16-2006, 03:08 AM
You can use javascript to create page inside of the iframe.

le007
12-16-2006, 03:12 AM
Really? Any links plz?

_Aerospace_Eng_
12-16-2006, 03:43 AM
Try the below, just be sure the links that open larger images have the large image directly linked and rel="gallery" is in the link.

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function callImage()
{
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++)
{
if(links[i].getAttribute('rel') == 'gallery')
{
links[i].onclick = function()
{
window.frames['main'].location = 'image.html?filename=' + this.href;
return false;
}
}
}
}
window.onload = callImage;
</script>
</head>

<body>
<a href="bigimage1.jpg" rel="gallery" target="main">thumb 1</a>
<a href="bigimage2.jpg" rel="gallery" target="main">thumb 2</a>
<a href="bigimage3.jpg" rel="gallery" target="main">thumb 3</a>
<iframe id="main" name="main" src="image.html" width="790" height="480" scrolling="no" frameborder="0"></iframe>
</body>
</html>

image.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#000;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var imgname = location.search.split('=')
document.getElementById('imagehold').src = imgname[1];
}
</script>
</head>

<body>
<img id="imagehold" alt="">
</body>
</html>

le007
12-16-2006, 09:07 PM
Many thanks for that _Aerospace_eng_
however I need the links to be inside the image.html loading the images from the same page - the links can't be outside it?

_Aerospace_Eng_
12-17-2006, 04:04 AM
Thats not what you said originally. You said you were linking an image directly to the iframe from a different page. It helps if you specify exactly what it is that you want. It saves everyone time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function callImage()
{
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++)
{
if(links[i].getAttribute('rel') == 'gallery')
{
links[i].onclick = function()
{
document.getElementById('imagehold').setAttribute('src',this.href);
return false;
}
}
}
}
window.onload = callImage;
</script>
</head>

<body>
<a href="bigimage1.jpg" rel="gallery" target="_blank">thumb 1</a>
<a href="bigimage2.jpg" rel="gallery" target="_blank">thumb 2</a>
<a href="bigimage3.jpg" rel="gallery" target="_blank">thumb 3</a>
<img src="imagehold" alt="" />
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum