Web development by PHP-Web-Host.com   Website Hosting by PHP-Web-Host.com
Web Hosting by PHP-Web-Host.com

HTML Tutor!

HTML Tutor, learn to author your own website

 

 

Resources

SoftSmart.co.za | Linux Web Hosting

 

 

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

Another option that can be used if you want to offer a lot of imagery is to provide thumbnails that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures of let's say a few of my cars (I wish).

Car 1 Car 2 Car 3
Click on the thumbnail to see a larger image

The first thing you need to do is fire up your image editor and make smaller versions of your images. This bit about making a smaller version is very important. I have seen many instances of someone trying to make a thumbnail by simply reducing its dimensions in the <img> tag. All this does is cram the full image into a smaller space. What you need to do is create a smaller copy of the image and use that as a link to the big image.

Let's do one. I think we'll use the Corvette (that's the blue one if there's anyone out there that for some silly reason doesn't know). Put the full sized image and the small image in your working folder. Once again... right-click & Save Picture As (or something similar).

Start with an <img> tag using the smaller image.

<body>
<img src="car2-sm.gif" width="90" height="62">
</body>

Add your <a> tags.

<body>
<a><img src="car2-sm.gif" width="90" height="62"></a>
</body>

Then add the URL of the big picture and bingo, you're done!

<body>
<a href="car2.jpg"><img src="car2-sm.gif" width="90" height="62"></a>
</body>

You can, if you'd like, get rid of the blue border. Or, you may wish to keep it so that your viewers know that it is a link. It's up to you.

<body>
<a href="car2.jpg"><img src="car2-sm.gif" width="90" height="62" border="0"></a>
</body>
So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Index & Quick Reference      Table of Contents      ColorPicker      BareBones HTML Guide
Color Charts      Simple Font Widget      Practice Exercises      Where are my images?
Print version of this tutorial available - Get the PageTutor Book & CD

 

 

SoftSmart.co.za | Linux Web Hosting

 

 

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

 

 

We accept PayPal

 

Web Hosting by PHP-Web-Host.com Website Hosting by PHP-Web-Host.com

[ Home ] | [ Software ] | [ Web Development ] | [ Resources ] | [ Contact ] | [ Privacy Policy ] | [ Acceptable Use Policy ] | [ Terms of Service ] | [ Sitemap ] | [ Clients ] | [ Affiliates ]

[ PHP Web Hosting ] | [ Linux Web Hosting ] | [ 500mb PHP Web Hosting ] | [ 1Gb PHP Web Hosting ] | [ 3Gb PHP Web Hosting ] | [ 6Gb PHP Web Hosting ] | [ 10Gb PHP Web Hosting ]

[ HTML Tutor ] | [ CSS Tutorial ] |