[HTML]

Thumbnail image

   To save space on the screen, place a smaller image than the real one. The image you click on will bring up the large Image.

   The Code:
<a href="The real image"><img src="The thumbnail image" alt="Bart" border=0 height=50 width=30> </a> Format

   Your image format must be .gif , .GIF,.jpg or .JPG. If your images are in .bmp or art format they will not show. Open the .bmp in your image editor and save it as jpg or gif .

   Warning
The name and the location of the image are case sensitive.
http://www.angelfire.com/images/images2/bart.gif 
is not the same as
http://www.angelfire.com/images/images2/Bart.gif
or
http://www.angelfire.com/images/images2/BART.GIF

    The Details:
Open your image in an image editor, re size the image to a smaller height and width and save it as a thumbnail of the real image, the real image name is image1.gif name the thumbnail image1t.gif, this will make it easier for you to track the images.

   Put this line with no spaces.
<A HREF="images/real.gif"><IMG SRC="images/thumb.gif" ALT="Bart" BORDER=0 HEIGHT=50 WIDTH=30></A>
or
It can be the same Image as the linked image, but instead of sending the browser to a different page, you get the larger image. Put this line with no spaces.

   <A HREF="images/real.gif"><IMG SRC="images/real.gif" ALT="Bart" BORDER=0 HEIGHT=50WIDTH=30></A>

   Where HEIGHT=50  and WIDTH=30  are smaller than the real image.

[Home] [Tools] [Angelfire Help] [HTML] [Tips and tricks]