showpic

Look at the crowd picture above. See how it fills the width of the browser window. Luckily, I guessed what size you would display it at, right? Hmmmm... Maybe not.

In HTML, you display a picture with an Image tag like this:

<img src='mypic.jpg' alt='My Picture' align='left'>

If you leave out the height and width, they will default to the actual size of the picture. This is a bad idea. Your browser will not know how much room to leave for the picture. This means that the page cannot display until after the picture has loaded. Since pictures are usually the slowest part of the page, you can leave your visitor hanging with nothing to read.

<img src='mypic.jpg' alt='My Picture' align='left' width='100' height='50'>

Putting in the correct size for your picture reserves space and allows the browser to compose the page. Now your visitor can begin reading your content while the picture loads. This is especially important with large pictures or pages that have many graphics. This is the normal way to create graphics and will handle most circumstances.

However, there is one exception. Suppose you want your graphic to have a certain relationship to the window size. For example, you might have a very big picture and want to show it as large as possible, but you do not want the visitor to have to scroll to see it all. You could optimize the picture for a 640x480 window, but that will leave a lot of space on a larger display, and still might not fit if the visitor only has a small window open. You can't solve this problem in HTML; you need JavaScript.

Here is a little routine called showpic that will solve this problem for you. You can show any picture you want and relate its display size to the actual size of the display window. For example, the crowd picture above will change size to fit the window size. You don't believe me? Okay. Just grab the side of this browser window and change its size and shape. See how the picture changed to fit the screen. (Note: This page reloads automatically when resized. Normally you would have to type Ctrl+R to see the change.)

Showpic will always draw the largest possible picture that fits within the parameters you specify. Here is how you use showpic.

showpic (src, w, h, alt, aln, pw, ph, bw, bh)

src: source: The source of the picture, just like the src attribute of the Image tag.
w: width: The actual width of the picture.
h: height: The actual height of the picture.
alt: What to put in the alt attribute. Defaults to "Picture."
aln: align: What to put in the align attribute. Defaults to "left."
pw: percentage width: What percentage of the available width do you want to use. If you have two pictures displaying side by side, you might want to give each 50 percent of the width. Defaults to 100.
ph: percentage height: See pw. Defaults to 100.
bw: border width: It is just about impossible to fill a window with a picture. The browser always leaves some white space around it. This is an allowance for that padding. The default of 24 is usually sufficient although you might play with this is you want to leave extra room. Please note that the border parameter does not insert white space. It merely makes the picture smaller so that the white space can exist without causing scrolling.
bh: border height: See bw. Defaults to 24.
Examples:: showpic ("mypic.jpg", 100, 50)

showpic ("mypic1.gif", 150, 39, "Picture 1", "middle", 50)
Note. Above example will never use more than 50 percent of the available width.

You may omit trailing parameters as long as the defaults are acceptable. If you need to change a later parameter, but want an earlier default, just use null. e.g. Type null - no quotes.

To use this routine just cut and paste the following code into the <head> section of your page:


<script type='text/javascript'>

function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {

// fit a graphic within the current window or frame
// showpic provided by www.DragonQuest.com

	if (src==null) return;
	var iw, ih			// Set inner width and height for NS and Explorer
	if (window.innerWidth==null) {
		iw=document.body.clientWidth;ih=document.body.clientHeight;}
	else {iw=window.innerWidth;ih=window.innerHeight}
	if (w==null) w=iw; 				// width
	if(h==null)  h=ih;				// height
	if(alt==null) alt="Picture";		// alt text
	if(aln==null) aln="left";			// alignment
	if(pw==null) pw=100;			// percentage width
	if(ph==null) ph=100;			// percentage height
	if(bw==null) bw=24;			// border width
	if(bh==null) bh=24;			// border height
	var sw=Math.round((iw-bw)*pw/100);
	var sh=Math.round((ih-bh)*ph/100);
	if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h);
	else sh=Math.round(h*sw/w);
	document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">');
	}
</script>