Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Iframe background color?

    <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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but I can't do that as the jpg is the link for a bigger jpg?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can use javascript to create page inside of the iframe.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Really? Any links plz?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <!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
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •