Image Maps and Graphics Internet Basics and Far Beyond! Mrs. Wilson

Monitor size and resolution go hand in hand. The resolution is the number of pixels which are displayed on the screen. With few exceptions, a person using a 640 X 480 monitor should be able to view an entire image without scrolling. Resolution

Pixels & Dithering Pixels are the smallest unit, a rectangle of color upon which digital bitmap images are built. Pixels is a word invented from “picture element” Dithering occurs when an image is edited in some way such as converting to fewer colors, resizing, or filling an area.

Image Maps Take a single image, surround it with an anchor tag, and create a hyperlink so that the user can click on any portion of the image to jump to a new web page. You will need the following:  An image  A map defining the areas to be linked  The tag containing an attribute to associate the image and the map

Two types of Image Maps Server Side  This is the older method of doing image maps.  The reason for finding out what type of server you are on is so you know what format to make your map files in.  NOT USED

Client Side: These maps are implemented by placing the map coordinates in your document's HTML code.  This method is supported by most modern browsers.  It is much more efficient than the Server Side map in that you do not transmit mouse coordinates back to the server.  This lesson will be dealing with this type of mapping.

HOW to create an Image Map Let’s disregard the image creation right now. Assume you have an image that needs to have an image map defined for it. You want each figure below to be a “click” or URL.

Coordinates First, you need to determine the coordinates of each of the items. Computers use the upper left corner as (0,0) with movement to the right being positive changes in x and movement down is a positive change in y

Use MS Paint You will use MS Paint to find the coordinates. Go to Start | Programs | Accessories | Paint Open your MAP.GIF image Run your mouse over the image and watch the numbers (coordinates) in the lower right-hand corner of your screen.

Make your TAG You must have a beginning and ending tag The begin tag must have an attribute called name Of course the end tag is simply. Within the map region, we must define areas. An area has a shape, coordinates, and the URL to go to if the user clicks within the shape.

Shape Tags Poly  It is used to create a polygon, or multi-sided shape, which the viewer can click on.  For coords, it requires a list of X and Y coordinates of all of the points along the edge of the polygon.  For complicated poly shapes, the coords parameter can be very long, and it becomes easy to make mistakes.  It is usually best to keep your poly areas down to 8 points or less.

Rect & Circle Rect  rect makes a rectangular area clickable, and for it, you need 4 numbers - the X and Y coordinate of the top left corner, and the X and Y coordinate of the bottom right corner. Circle  For a circle, you must specify three numbers: The X and Y coordinates of the center of the circle, and the radius.

Let’s Make the Tag Refer to the hand out and let’s get busy!