iFrames, white space before image appears.

DM · Joined: 27 Apr 2008 Posts: 12

Thanks.. Here's an example of a site that has the same type of look as I have developed:

www.bradholland.net

Thanks again.

Straystudio · Joined: 14 Apr 2008 Posts: 218 Location: Nord Italy

DM · Joined: 27 Apr 2008 Posts: 12

Thanks Straystudio...but the position of the iframe moved, as you suspected.
And the white space problem remained.

Straystudio · Joined: 14 Apr 2008 Posts: 218 Location: Nord Italy

Straystudio · Joined: 14 Apr 2008 Posts: 218 Location: Nord Italy

Wait ...
I strongly suspect now, the fact has to do with image resizing, the Browser does to fit the image into iframe 's fixed space.

You handle pics having original size larger than width="368" height="350", I guess; as iframe space is sized in pixel.
If so, scroll bars should appear on a while, too.

As far as managing uploading time, the way I showed is more than good, but I no longer think this is the actual matter; as more, since You told images come from computer itself, they may upload almost instantly.
I kept thinking of a delay due to the system, due to very Mb-heavy images, to naming elements to be revised, and so; but at end, I am actually sure it is due to auto image resizing.

Check any image size, right-mouse click on the image, go to Properties and left click.

Let us know ...

Straystudio · Joined: 14 Apr 2008 Posts: 218 Location: Nord Italy

Well, from the code You gave, <iframe src="images.html" I understand You embeded image in an html document; I second that as the right way to go, usually done by centering the img in a table.

If so, You could work out as file.html : (shortly)

<table height="100%" width="100%"><tr>
<td align="center" valign="middle">

<img height="" width="" src="file.jpg" />

</td></tr>
</table>

Now assign value in pixel to both height="" width=""
accordingly to the iframe size and of course, keeping picture's proportions.

Now I have to leave.
You have to assign both the height and the width as final ones, not one only. So, the iframe will find everything squared already.
You lose the capabilty to show those file.html full size image alone on to the Broser, yet.

Editing the whole set of pics in post-work, duplicated and resized, would be way better; working out iframe-wise dimensions directly as their original new size.
Do not forget to keep saved aside, original copies in original large size, as well.
You won't go back well, to one day, from a size-reduce pic to the large one again.

DM · Joined: 27 Apr 2008 Posts: 12

Hi Straystudio- Thanks. My images going into the iframe are all the same size as the iframe, 368x350 px. All of the images are jpg of varying sizes on a jif background that matches the background of the main page where the iframe is located. Below the code for an image:

<tr>
<td rowspan="5">
<img src="images/_art-copy2---Almo-30.gif" width="41" height="272" alt=""></td>
<td> <a href="Beware-What-You-Eat.html" target="images"><img src="images/_art-copy2---Almo-31.jpg" alt="" width="20" height="20" border="0"></a></td>
<td colspan="2" rowspan="5">
<img src="images/_art-copy2---Almo-32.gif" width="33" height="272" alt=""></td

Thanks for your time and effort.

DM · Joined: 27 Apr 2008 Posts: 12

I read that the white space that appears before the image in an iFrame is the space that the Browser is making available for the image. Can anyone verify that?

Thanks.

soccermatrix · Joined: 10 May 2008 Posts: 1

Am I the only here, or is everybody doing something harder than it needs to be. Here is the original post by user DM:
"Would greatly appreciate help with getting rid of white area in iFrame that appears before linked image loads in iFrame. Thanks in advance to anyone."

Now, why would you want to load images using iframes?. Let me see if I understand what you're trying to do... You want to click on a link that displays a different image in a section of your page. MMhh, let's see. If that was the case, then you shouldn't be using iframes. If rames is to load data that needs to be hosted at a specific location and you can't move it, plus you want to show it in a section of your page.

Anyway, if all you want is to show a different image when a link is click then use this.


<img id="largeImg" src="image1.jpg" width="320px" height="240px;">
<a href="javascript:void(0)" onclick="largeImg.src='image2.jpg'">image2</a>


There you go, let me know if this is a better solution. If it's not what you were looking for, then your original posting is not clear.