                     Image Formats and Image Maps


You should be used to the "HTML language terminology" by now, so I'm not going to baby you any

 more.

If you are having trouble keeping up...go back, read the first few files over again.



 Ok, now we are ready to discuss image maps. in the fourth lesson we discussed images.


Remember : an image is a digital representation of a real picture, or a computer-generated

picture, such as clip-art, or paintbrush drawings.  But it can be a scanned in photo or

also a picture from a digital camera.  Basically, there are 3 main types of images: 


1     BMPs (bitmaps)--all paintbrush drawings are windows BMPs


2     GIFs (graphical interchange format)--  compuserve bitmaps


3     JPGs or JPEGs (joint photographers experts group) files --as you might have 
	guessed: this is the best format for photos. 


Unfotunately, most browsers (such as IE and Netscape) don't support BMPs, so we must use
only "Web-Safe" files: GIFs or JPGs.

Which to use? Here are the pros and cons:


JPGs

PROS
-can be compressed for faster download times (onto the person's browser)
-good for photos
-supports "true 24-bit colors", making it the sharpest-looking and most vibrant

CONS
-big filesize--the more detail--the larger the potential for huge filesizes
-is useless for small pictures, such as buttons, text as images, or even the star.gif file
that I included in this package


GIFs

PROS
-widely supported
-no dithering (dithering is when some JPGs look grainy-colored in some browers)
-good for diagrams, text as images, etc
-smallest filesize
-supports transparency (you can put transparent colors in gifs to give the illusion
of seeing through to the backround)

CONS
-smaller filesize means sacrificing quality
-limited range of colors --> photos wil not look exactly the same
-cannot be compressed so GIFs with large filesize will take longer to download.

-----------------------------------------------------------------------------------

In general, use gifs for small images, jpgs for large, detailed images and photos.

So, if you want to create a picture in paintbrush to use on your webpage, you must cut+ paste
it to a image editor, such as Adobe Photoshop, and then save it as a gif or jpg. 

-----------------------------------------------------------------------------------

---->now, about image MAPS......



picture this as an image:   _____________
			   |             |
			   |             |
			   |     *       |
			   |    ***      |
			   |     *       |
			   |             |
			   ---------------	

In lesson 4, I showed you how to make an image a link.



Believe it or not, we can "sub-divide" this image into separate sections, making each
section a different link. This is called an "image map".


   			    _____________
			   |XXXXXXXXXXXXX|
			   |XXXXXXXXXXXXX| <-- this half links to amazon.com
			   |XXXXXXXXXXXXX|
			   |    ***      |
			   |     *       |  <--this half links to lycos.com
			   |             |
			   ---------------	

Here's how we do it:

create a blank html document:

<html>
<body>


</body>
</html>


I gave you an image with this package called "gasprices.jpg"

insert it in the html doc.

<html>
<body>

<img src="gasprices.jpg">

</body>
</html>

we need to tell the image that it will be used as an image map:

<html>
<body>

<img src="gasprices.jpg" Usemap="#GasPrices" >

</body>
</html>


You always need the "#" before the name of the map.

Now, let's define the map itself:

<html>
<body>

<img src="gasprices.jpg" Usemap="#GasPrices" >


<map name="GasPrices">


</map>

</body>
</html>


The next part involves the AREA tags, they tell the image what shape the "hotspot" will be in, 

circle, rectangle, or polygon (amorphous--any shape)

They also tell it where the shape will be, and what it's associated href will be.

<html>
<body>

<img src="gasprices.jpg" Usemap="#GasPrices" >


<map name="GasPrices">

<area shape=circle coords="110,100,30" href="http://www.shell.com" >


</map>

</body>
</html>
 
Now, when you mouse over the "self-serve" part of the pitcure, your pointer will turn into
a hand. This is because this area of the picture is a "hotspot" or hyperlink.



The coords are the X,Y coordinates of the hotspot.
On a circle, there are 3:

			  CIRCLE'S CENTER POINT
			 X(horizontal) Y(vertical)     radius
			   \/              \/           \/
<area shape=circle coords="110,            100,         30"    href="http://www.shell.com" >
 			

The X and Y coords have to do with pixel sizes. We will not get into that, but if you would 
like to see what the approximate representation of pixel sizes are in a picture, open an image
in paintbrush.

As you move your cursor over the picture there is a little box in the status bar at the bottom
that has 2 numbers. The X,Y numbers change as you move your mouse around. This can sometimes 
give you a good idea of what to put for X,Y coords.

Of course, yo can always guess + check, like I do. It may be helpful to know that 1 pixel
is literally 1/64 of an inch. Conversely 64 pixels= 1 inch. Therfore :

<area shape=circle coords="64,64,128" >

This means that your circle's center is located 1 inch from the top and 1 inch from the left.

It's radius is 2 inches. Therefore, If you can do the quick math, such a large circle
in a corner of the picture is going to lose some of it's hotspot because it will be
partially off the page. This can also work to your advantage if you wish to have a circle-like
hotspot encompassing the upper left corner of your image.


Next, add a rectangle link hotspot:

<html>
<body>

<img src="gasprices.jpg" Usemap="#GasPrices" >


<map name="GasPrices">

<area shape=circle coords="110,100,30" href="http://www.shell.com" >

<area shape=rect coords="170, 240, 280, 170 " href="http://www.arm.com" >

</map>

</body>
</html>

Notice that we need 4 coords: 2 for each X,Y pos of 2 OPPOSITE corners.

	                   _______________
		           |             | <--(280, 170) 280 pixels from the left
			   |             |		 170 pixels from the top
			   |             |
			   |             |
170 pixels from the left   |             |
240 pixels from the top    |             |
             (170,240) --> --------------- 


If you dont like math, or are unfamiliar with X Y coordinate type graphs, this will be 
difficult for you. There are several programs you can download for free that will automatically
create the image map tags and code for you by allowing you to click and drag your mouse over 
the image.

http://www.boutell.com/mapedit/download.html
/\
You will need to read the how-to file in this program and then get familiar with it.


Before I'm done with this subject, I'll just mention brifely how to use the last feature:

POLYGONS


<area shape=poly coords="11,45, 56,78, 170,240,  280,170  367,478 " href="http://www.poly.com" >

Yep, you guessed it...For polygon shapes such as triangles, quadrilaterals, stars, ect. You 
must define the coords of EVERY corner. This is where Boutell's MapEdit program
comes in handy.

By the way, the poly example will work --> around the text that says "regular" in the image. 
And poly.com IS an actual polygon website.    Can you believe that each of the 3 URLs that I 
chose: shell.com, arm.com, and poly.com  all existed?    I didn't even check to see if they 
were actual sites first.    The net is a big place indeed.



And that's it.....................Whew!

The last tutorial is on forms. Forms and tables are the most useful HTML tools on the internet
bar none.  Open WEBSTUFF8.txt.


























