<a href="your-file-title-here"> the words indicating your link in the browser window here</a>
Here is a variation where you use a photograph as the clickable link. Say you want a photo of a house to be a link to a house tour. Or perhaps you simply want a small picture to be a link to a larger version of the same picture. This would be used by artists to allow visitors to click on a larger version of a piece of artwork to see it in more detail. I use this type of link all the time on my web site. Check out my NEW POTS PAGE and click the thumbnails. This design is used primarily to cut download time and give the viewer options of looking at only what they are interested in. For this link, you need a clickable "image source." The link looks like this:
If I were using this type of link to show a small thumbnail of a clickable link for "pot #641" which would take you to an HTML page with a full description of the pot with multiple pictures, it would look like this:
The thumbnail (P9290087-641-thum.jpg) would be a small 2 or 3 K photo that could take you to a page that could be megabytes long.
I will show you one more way that I use images on my site. Again, look at my NEW POTS PAGE. Here the thumbnails are laid out in a table. Actually, the whole page is just a repeating series of the links above, set into another layer of tags that order them into a table. I always update my site with new pots in multiples of three. I just copy and paste one section of the table and plug in my images. I'll just copy and paste a section of one of my tables on the NEW POTS PAGE and explain what is happening. Here is the table section as it appears on my web site. And it "works" because I did a copy and paste right off the page and duplicated the files and folders and brought the "update10-1-02" folder over to this web page.
Here is what the browser displays:
#641 "Leafy Gourd" Porcelain - 10.5"h -2002-SOLD
#648 "Locust Tree Pot" porcelain - 7"hx12"w" - 2002-SOLD
</tr>
</table>
Here are what the various tags mean:
<table cellspacing=> refers to the minimum number of pixels between the thumbnails. You can make it any number you want depending on how many cells you have and the pixel width of your monitor. Remember that the "standard" (if there is such a thing) viewing screen on the web is currently 800 pixels wide by 600 pixels high.
<tr> denotes the number of table cells (thumbnails) in a single row. Between the "tr" tags is one row. Here there are three items in this row.
<td> encloses the text in an individual cell.
<A HREF="XXXXXX"> is the link to your HTML (or whatever) page describing the thumbnail.
<img src"xxxxxx"> is the image you are posting that you are making a link to the aforementioned HTML page.
The "border=2" inside the image source tag refers to the pixel thickness of blue around the thumbnail signaling that it is a link.
The <p> tag defines the beginning and ending of a paragraph of text. The <br> tag often provides this function as well.
My goal in designing my website was to keep it simple. This page really describes the heart of how I use images in my web site. The only other use that I have for images on my site is using them for backgrounds.
