12-19-2006, 12:32 PM
Posting pictures directly in your post is nice, but in order to get acceptable loading times your pictures need to be few, small, or low-resolution (I try to keep my total size around 100k).
But what if you want to show off a high-resolution picture of your beautiful work? There is an option! You can create thumbnails for the viewer to click. The thumbnails load *very* quickly, and the user can make his own decision whether or not to click them.
I use Frontpage to create websites, and it has an "Auto-Thumbnail" option. You can also use your favorite photo editing software to resize your image. I find that 150 pixels wide works very well.
So here's how to do it:
My large and small images are here (yours will be at Photobucket.com, Imageshack.com, or wherever):
http://www.fisherwoodcraft.com/images/jewelry1.jpg
http://www.fisherwoodcraft.com/images/je..._small.jpg
Now if I wanted to just insert the image, it would look like this (the code I wrote, then the result):
Code:
If I want to make a clickable hyperlink, it looks like this:
Code:
This is my website
Note that the destination of the link is inside the "url=http://" part, and the stuff to display on screen is in between the "url" and "/url" tags. We use this to our advantage to create a clickable thumbnail image:
Code:
Notice how the large image is the target of the hyperlink, and the small image (inside the "img" tags so it shows on screen) is the thing to display in the hyperlink.
Hope this helps!
-Joe
But what if you want to show off a high-resolution picture of your beautiful work? There is an option! You can create thumbnails for the viewer to click. The thumbnails load *very* quickly, and the user can make his own decision whether or not to click them.
I use Frontpage to create websites, and it has an "Auto-Thumbnail" option. You can also use your favorite photo editing software to resize your image. I find that 150 pixels wide works very well.
So here's how to do it:
My large and small images are here (yours will be at Photobucket.com, Imageshack.com, or wherever):
http://www.fisherwoodcraft.com/images/jewelry1.jpg
http://www.fisherwoodcraft.com/images/je..._small.jpg
Now if I wanted to just insert the image, it would look like this (the code I wrote, then the result):
Code:
Code:
[img]http://www.fisherwoodcraft.com/images/jewelry1.jpg[/img]
If I want to make a clickable hyperlink, it looks like this:
Code:
Code:
[url=http://www.fisherwoodcraft.com/]This is my website[/url]
This is my website
Note that the destination of the link is inside the "url=http://" part, and the stuff to display on screen is in between the "url" and "/url" tags. We use this to our advantage to create a clickable thumbnail image:
Code:
Code:
[url=http://www.fisherwoodcraft.com/images/jewelry1.jpg][img]http://www.fisherwoodcraft.com/images/jewelry1_small.jpg[/img][/url]
Notice how the large image is the target of the hyperlink, and the small image (inside the "img" tags so it shows on screen) is the thing to display in the hyperlink.
Hope this helps!
-Joe