Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

picture size in frame not sized 1

Status
Not open for further replies.
snuv

snuv

Programmer
Oct 30, 2001
751
GB
I have written a program that will generate a simple html photo album but I have a problem with it

When I open the sample picture file in its own window, it displays correctly, filling the window.
When I use the frame and index to open it in the picture frame it displays the picture full size, which may mean a lot of scrolling or a thumbnail in the corner
I am using IE6

Can anyone tell me what I should do to display pictures the full size of the picture frame and no bigger?

container file
Code: 
<html>
<frameset cols="20%,*">
	<frame name="index" src="html/index.html"></frame>
	<frame name="picture" src="html/blank.html"></frame>
	<noframes>
		Sorry, this document can only be viewed with a frames-capable browser.
	</noframes>
</frameset>
</html>

index file
Code: 
<html>
	<body bgcolor="#008080">
		<a href="..\picture\P3020060.JPG" target = "picture"> P3020060 </a><br>
		<a href="..\picture\P3020061.JPG" target = "picture"> P3020061 </a><br>
	</body>
</html>

sample picture file
Code: 
<html>
	<body>
		<img src="../picture/P3020052.JPG" width="100%" height="100%">
	</body>
</html>

Go not to cats for advice for they will just walk over the keyboard
 
Sort by date Sort by votes
try making two sizes one for the first frame and one in the new window, however you may specify a size for either with out actually tweekin the pic...

__________________________________________________________
"The only difference between me and a mad man is that I'm not mad."
- Dali
 
Upvote 0 Downvote
Something like this works for me in the "index.html" file (using IE6).

Note the following:
(1) use of onclick events with anchors, rather than hrefs.
(2) commented-out lines in function openPic(...) do not appear to be needed (i.e., the picture maintains proportion when height or width is adjusted), but if your browser needs that added bit of direction, UNcomment out those lines.

Code: 
<html>
<HEAD>
<SCRIPT>
function openPic(pic)
{
 var pp = parent.picture;
 var htmlString = "<html><body><img name='newImage' style='visibility:hidden;display:inline;' src='"+pic+"' /></body></html>";
 pp.document.write(htmlString);
 pp.document.close();
 
 var width = pp.newImage.offsetWidth;
 var height = pp.newImage.offsetHeight;
 if(width > height)
 {
  pp.newImage.style.width = '100%';
[b]//  var newWidth = pp.newImage.offsetWidth;
//  var newHeight = height * (newWidth/width);
//  pp.newImage.style.height = newHeight;[/b]
 }
 else
 {
  pp.newImage.style.height = '100%';
[b]//  var newHeight = pp.newImage.offsetHeight;
//  var newWidth = width * (newHeight/height);
//  pp.newImage.style.width = newWidth;[/b]
 }

 pp.newImage.style.visibility = 'visible';
}
</SCRIPT>
</HEAD>
    <body bgcolor="#008080">
        <a href="javascript:void(0);" [b]onclick='openPic("Nic1.bmp");'[/b]> nIC </a><br>
        <a href="javascript:void(0);" [b]onclick='openPic("STONE.BMP");'[/b]> STONE </a><br>
    </body>
</html>

'hope that helps.

--Dave
 
Upvote 0 Downvote
Never thought of using a script function to solve the problem

Thanks for that


Go not to cats for advice for they will just walk over the keyboard
 
Upvote 0 Downvote
doh

If I'm going to the trouble of writing a container file for each picture, I should probably use them in the index file instead of referencing the picture directly

:-/


Go not to cats for advice for they will just walk over the keyboard
 
Upvote 0 Downvote
You're not. You'd be creating the containers on the fly. Each time you use the document.write(...) method in the openPic(...) function, you'd be clearing out the 'picture' frame and rewriting your on-the-fly-HTML to it.

Am I understanding you that this was what you were talking about?

--Dave
 
Upvote 0 Downvote
Not really

I have a container file with two frames
One contains the index with anchors
the other is supposed to contain the html file that holds the picture and its size information

What I actually did was put references to the pictures themselves in the anchors and never used the picture html files so there was never any size information for the browser

ie i was using
Code: 
<a href="..\picture\P3020060.JPG" target = "picture"> P3020060 </a><br>
instead of
Code: 
<a href="P3020060.html" target = "picture"> P3020060 </a><br>
I need to do some testing to find out what happens with pictures of different shapes and it may be better to use your script function but I was hoping to keep it simple for now

Thanks for taking the time to look












Go not to cats for advice for they will just walk over the keyboard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
827
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
792
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
191
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top