Ray Smith's Tips, Codes, & Info Pages

Ray Smith's Journal -Tips, Codes, & Information Pages

IMAGE PLACEMENT, SIZING AND MORE

~ What Is Your Preference In Background Colors Today? ~

1. CODE FOR ADDING A SINGLE IMAGE TO A PAGE:
A. By altering the width & height numbers you can change it's size.
B. The correct code to use is shown in this example:

C. The width should go first, and the word "width" must be spelled out, just a "w" will not work. Also the word "height" must be spelled out, just an "h" will not work.
D. Entering the code in this manner makes loading faster.

2. A NOTE ABOUT IMAGES IN EMAIL: The email page is only 388 pixels wide [viewing area w/o using CSS and the standard width] with the pixels given up to the sidebar,128 pixels, and each side gives up about 18 each. �Since the upgrade the WebTV email screen will not compress the image as before the upgrade. The WebTV browser only sees 544 pixels wide You'll find that using 400 for maximum width will work alot better.

3. PLACING TWO IMAGES SIDE BY SIDE:
A. Put them in a table as shown in the example:

4.PLACING THREE IMAGES SIDE BY SIDE:
A. Put them in a table- see example below:

5. STACKING THREE IMAGES ON TOP OF EACH OTHER:
A. Use the following code, adjust as necessary:

<table colspan="1" cellspacing="40" border="1"><tr><td align="center" width="200">Place your top text or image code here</td></tr><tr><td align="center" width="200" bgcolor="white">Place your middle text or image code here</td></tr><tr><td align="center" width="200">Place your bottom text or image code here</td></tr></table>
B. Note: You may have to add the <center> code here </center> tags on each end of the code to center it, within the page. The "cellspacing" # is used to add spacing between the three elements. The spacing may not look correct in "edit" mode, but in "preview", the effect can be seen and should be changed or altered from that view. I have used the bgcolor="color" in the middle portion of the code to achieve that effect. They can be used in the other "data cells", as placed in the code, or deleted if not warranted. The border="#" code was also added, to the starting "table" portion of the code, for the border effect. The number can be changed or that portion of the code deleted. Any images may need to be resized for proper spacing within the code.

6. MAKE AN IMAGE INTO A THUMBNAIL:
A. You are basically linking to the same image both times, once for the display and once through the "clickable" link. With the width="#" code added, your specifying the image be a smaller display, and it appears in that size, and is being used as the "clickable" item to the regular/larger image. This is fairly easy to do and works well if your not using many images, as the actual image "file size" is not being reduced, only displayed in a smaller area. If you use lots of images, the load time will suffer, as in reality, the full image is still being loaded.
B. Here is the code, adjust thumbnail width as desired:

7. HOW TO USE AN IMAGE WITH A .HTML ENDING:
A. Use this code:

8. MAKE IMAGE INTO A CLICKABLE IMAGE:
A. Use this code, the 1st URL is the address you want to go to when the image is clicked, the second URL is the address of the image gif/jpg you want to use as the image to be clicked on:

<a href="http://www.geocities.com/dominant.geo/RSJinfoPg/URL%20of"Go To" website"><img width="XX" height="XX" border="0" src="http://www.geocities.com/dominant.geo/RSJinfoPg/URL%20of%20Image%20you%20want%20to%20use"></a> NOTE: be certain to put in the closing</a> tag!

Hosted by www.Geocities.ws