You already know how to turn images into hyper-references using the A (anchor) tag to mark an IMG tag.
Example:
<a href="http://www.yahoo.com/"><img src="capitalA.gif" width="54" height="54" border="0" alt="Capital A"></a>
Displayed:
When you wish to have MORE than one link available from a single picture, however, the above code won't work for you; you'll need to create an imagemap.
Here is a simple picture which could benefit from becoming an imagemap; notice the two distinct areas which could be clickable:
Here is an example of the above picture used as an imagemap.
Again, an imagemap allows you to take an ordinary image and make multiple clickable hyper-references available to the user from that one image. I'm sure you've seen much more complex examples of imagemaps while surfing the Web. Any number of areas, in a variety of shapes, may be made clickable within the bounds of a single image. For instance, you could take a picture of the state of California, map all of the counties as separate clickable areas, and make each county on the image a hyper-reference to the appropriate county home page.
I'm going to show you how to make an imagemap by hand, which is an important skill. However, when constructing complex imagemaps out in the professional world, you may wish to use some sort of software to derive the imagemap for you, saving time and effort.
A shareware program can be downloaded from the Web called MapEdit, which can handle imagemap construction for you automatically. MapEdit is offered for Mac, PC, and UNIX platforms. It is available at http://www.boutell.com/mapedit/.
There is also a freeware program for Windows called Handy Image Mapperthat can be downloaded from http://silveragesoftware.com/ftp/HndImgMapSetup.exe
Most major WYSIWYG HTML editors, such as Dreamweaver and Adobe GoLive, include some sort of imagemap generating software. But it is much faster to just code the thing entirely by hand rather than to use more sophisticated software. Because of this, it is important to know exactly how to construct imagemaps quickly and efficiently by hand. For Homework Assignment 5, I strongly suggest that you make at least one imagemap by hand.
Before we can get into details of mapping shapes, we must be certain that we are clear regarding basic graphing skills, mapping coordinates on the two-dimensional Cartesian coordinate plane.
Here is an example of what is known as the Cartesian coordinate plane:
To define coordinates on the Cartesian coordinate plane, we use the x-axis and the y-axis to determine how far from the origin point we are (the origin point being 0,0 on the diagram, where the x-axis and y-axis meet); points on the x-axis increase in value as we move to the right, while points on the y-axis increase in value as we move up. A point on the coordinate plain is always defined as "x,y", which defines the location of the point in relation to the x-axis and the y-axis. In the diagram, there are two points mapped: "2,3", which is two over on the x-axis and three up on the y-axis; and "4,1", which is four over on the x-axis and one up on the y-axis.
On the computer, locations on the coordinate plane are mapped in a slightly different manner. The origin point of the coordinate plane on the computer is always in the upper-left-hand corner of whatever is being scrutinized. If you are determining locations on the computer screen, the origin point is at the upper-left-hand corner of the screen. If you are determining locations on a web browser window, the origin point is at the upper-left-hand corner of the browser window. If you are determining locations on a digital image, the origin point is at the upper-left-hand-corner of the image itself.
On the computer, values on the y-axis increase as you move DOWN, not up; this is because the origin point is at the upper-left-hand corner of things.
Here is a diagram to make this point clearer (note the very large pixels that I've drawn):
As you can see, the origin (0,0) is in the upper-left-hand corner of this representation of a digital image, and marks the first pixel in the image. I have labeled three other points: "4,1" and "3,4" and "0,2" which all mark the "x,y" coordinates of the various pixels on the image.
When you are deriving the position and shape of clickable areas for an image, you will be doing so using these pixel-based x,y coordinates.
There are only three types of shapes which may be defined as clickable areas in an imagemap: RECT, CIRCLE, and POLY. Eventually, you will be deriving x,y coordinates for these various shapes and coding those coordinates into HTML tags to create clickable imagemaps. Before you can do that, however, we need to look at the type of coordinates required to define each type of shape.
The RECT shape includes both rectangles and squares. It is defined by two points on the digital image: the position of the upper-left-hand corner of the rectangle, and the position of the lower-right-hand corner of the rectangle. Once you've derived the positions of the upper-left-hand corner and lower-right-hand corner of the rectangle, you put the two sets of x,y coordinates together into one unit, separated by commas, like this:
x,y,x1,y1
On a theoretical image, the coordinates for a RECT with an upper-left-hand corner at "7,7" and a lower-right-hand corner at "71,71" would be:
7,7,71,71
The CIRCLE shape includes perfect circles only; no ellipses, ovoids, or other irregular shapes are permitted. A CIRCLE shape is defined on an image by the position of the center point of the circle, followed by the radius value of the circle, in pixels; remember that the radius of a circle is 1/2 of its diameter, the diameter being the total width of the circle at its widest point (in pixels). For instance, if a circle is 40 pixels wide (in other words, if its diameter is 40 pixels), the radius value for the circle would be 20 (pixels).
Once you've figured out the radius value for the circle, the center point x,y coordinate position and the radius value would be combined, separated by commas, like this:
x,y,r
On a theoretical image, the coordinates for a CIRCLE with a center point position of "100,50" and a radius value of 25 pixels would be:
100,50,25
The POLY shape includes all polygons, beginning with triangles and increasing in complexity to the most peculiar and irregular shape you can imagine. A POLY shape must have at least three x,y coordinate points defining it (a triangle), but may have as many x,y coordinate points as desired, in any shape, no matter how squiggly or peculiar. POLYs are used to outline irregular and bizarre shapes, such as county lines on state maps, or the picture of the edge of a book on a bookshelf, or cat's eyes, or crumpled tissue paper, or whatever.
The POLY shape must have its coordinates defined, in order, around the circumference of the shape. It doesn't matter whether you move clockwise or counter-clockwise around the polygon, just as long as you present the x,y coordinates in order. If you don't do this, you will not get the shape you want, but some ugly mess, as the computer draws the shape from first point to second point to third point, etc. You don't need to repeat the x,y coordinate for the starting point once you get to the last x,y coordinate of the polygon.
As with the RECT, you take all of the x,y coordinates for the POLY and combine them, separated by commas, like this:
x,y,x1,y1,... xn,yn
For a theoretical triangle shape with three x,y coordinates at its corners ("5,10" and "20,30" and "10,0"), the final coordinates would be:
5,10,20,30,10,0
Deriving x,y coordinates for clickable shapes in an image is not difficult; even deriving x,y coordinates to define complex polygons is not difficult, just time consuming.
All that you need for deriving x,y coordinates is image editing software, such as Adobe Photoshop, Paint Shop Pro, or even the freeware Paint program which comes with the Windows OS. Once you have opened your image in one of these programs, you will need to perform the following steps:
Before we get into the nitty-gritty of creating client-side imagemaps in HTML, I want to explain the difference between server-side and client-side imagemaps.
Years ago, before HTML had embraced imagemaps, there was special software on every web server which ran "server-side" imagemaps. The user would click on an image on a web page attached to one of these server-side imagemaps (using the ISMAP attribute of the IMG tag), which would call the web server software to analyze the precise location on the image where the user clicked, and serve the appropriate HTML page based on the user click. As you can imagine, these server-side imagemaps took precious time away from the web server's other duties (like serving HTML pages), which slowed down already-slow web servers.
Starting with HTML 2.0, client-side imagemaps were introduced as a part of the HTML standard. Client-side imagemaps placed all imagemap information into the HTML page, and were run completely by the web browsers, freeing up the web servers for more important operations.
Today, all major web browsers understand client-side imagemaps. The only web browser still in common use which does NOT understand client-side imagemaps is Lynx, the text-only browser (which doesn't even understand pictures).
Server-side imagemaps are rarely used anymore. Not only are they a drain on the server, but also have a disadvantage that client-side imagemaps do not have. A client-side imagemap allows one to see the URL in the status bar (lower left of screen), when the mouse is over a hot spot. This is not the case for a server-side imagemap.
It's time to look at the HTML necessary to create a client-side imagemap.
There are two parts to a client-side imagemap: the IMG tag which displays the image on the HTML page, and the MAP and AREA tags (invisible to the user) which contain all of the imagemap information. The A (anchor) tag is NOT involved in creating a client-side imagemap.
Because the actual imagemap information is coded only into MAP and AREA tags, the IMG tag needs to link to the MAP tag and its imagemap information using a special attribute, USEMAP; I'll talk about the USEMAP attribute and how it works at length in a moment.
Imagemap information is coded into HTML using the MAP and AREA tags, as mentioned earlier. MAP opens and closes around the imagemap information, with one AREA tag for each clickable area on the imagemap. Here is an example of the basic structure (without attributes):
<map> <area> <area> <area> </map>
The MAP tag ALWAYS closes, while the AREA tags, like the IMG and BR tags, do not need to close in HTML4.
The MAP tag has one attribute, NAME, which is required for the imagemap to operate properly.
Tag: MAP
Attribute: NAME
Value: any valid name (based on the naming rules discussed in earlier modules)
Description: the NAME attribute of the MAP tag provides an identifier which the USEMAP attribute of the IMG tag will use to connect itself to the imagemap information in the MAP.
Example (abbreviated): <map name="fred"></map>
The AREA tag has three required attributes: SHAPE, COORDS, and HREF. The HREF attributes are identical to their A (anchor) tag counterparts except for the fact that they work within an imagemap.
Tag: AREA
Attribute: SHAPE
Value: rect, circle, poly
Description: sets the shape of the clickable area which the individual AREA tag will define. Each AREA tag in a MAP may be a different SHAPE, or they may all be the same SHAPE.
Tag: AREA
Attribute: COORDS
Value: integer x,y (and r) coordinates separated by commas; the number of integers required depends entirely on the value of the SHAPE attribute for that AREA tag.
Description: the COORDS attribute of the AREA tag defines the x,y (and r) coordinates for the shape defined by the SHAPE attribute of that particular AREA tag.
Tag: AREA
Attribute: HREF
Value: any URL, relative or absolute
Description: the HREF attribute of the AREA tag defines the hyper-reference for that clickable area in the imagemap.
Example:
<map name="ethel"> <area shape="rect" coords="7,7,71,71" href="destination1.html"> <area shape="rect" coords="127,28,191,92" href="destination2.html"> </map>
Once you've encoded your client-side imagemap information into an HTML page using the MAP and AREA tags, you are ready to add your IMG tag to that HTML page.
An IMG tag used as an imagemap is coded identically to a regular IMG tag, with the addition of two attributes: BORDER and USEMAP.
Tag: IMG
Attribute: BORDER
Value: 0 (zero)
Description: the BORDER attribute of the IMG tag must be set equal to "0" when that IMG is being used for an imagemap. Because an IMG tag used as an imagemap is considered to be a hyper-reference by a web browser, a blue hot-link border will appear around the image (in many browsers) unless the BORDER attribute is set equal to "0". Imagemaps, by current conventions, should NOT exhibit a blue hot-link border.
Tag: IMG
Attribute: USEMAP
Value: the # (pound) sign followed by the NAME of the MAP tag to connect to, NO SPACES. For instance, if the NAME of the MAP tag desired was "ethel" (as in the example earlier), the value of the USEMAP attribute for the IMG tag would be "#ethel". Note: this "#thename" syntax follows the convention established with the A (anchor) tag for hyper-referencing NAME anchors within an HTML page.
Description: the USEMAP attribute of the IMG tag connects a MAP tag (and attendant AREA tags) to a given IMG tag, making it behave as an imagemap.
Example (including MAP and AREA tags):
<img src="demoMap.gif" width="200" height="100" alt="Demo Map" border="0" usemap="#ethel"> <map name="ethel"> <area shape="rect" coords="7,7,71,71" href="destination1.html"> <area shape="rect" coords="127,28,191,92" href="destination2.html"> </map>
It does not matter where on the HTML page the MAP and AREA tags are located. Ordinarily, web programmers will place the MAP tag immediately below the appropriate IMG tag, but the MAP tag could equally well be placed at the bottom or top of the HTML page without affecting performance in any way. Try to place the MAP tag someplace on the page where it won't interfere with the readability of your code.
An HTML page may have MANY different client-side imagemaps on it, as long as each one of the MAP tags involved is named a unique NAME. You may also place a particular imagemap on a page more than once; simply duplicate the IMG tag involved as often as you need, then have all of those IMG tags access the SAME MAP tag. DO NOT have TWO MAP tags of the SAME NAME on a single HTML page; this is not only pointless, it is forbidden.
FINAL NOTE: With some browsers, notably IE 5.0, if you point your mouse at an imagemap; click and hold down mouse button, you can see the outline of the shape. This is very helpful in determining if your coordinates of the imagemap are correct.
You can create a navigation bar using either:
1. flamingtext.com
2. Paint Shop Pro
In the text string, enter
hw1 hw2 hw3 hw4 hw5 hw6Don't go beyond Hw6, since flamingtext has a limit on the length of the text. Choose your desired font and font size. I would make the width equal to 400 and the height equal to 20 or 30. Leave the alignments as center. Choose your desired text mode, text pattern, text color (RGB), background mode, background pattern. Then click the create logo button. You will probably have to do this whole process a few times, changing some of the variables, before you are satisfied with the created logo. Save the image into the proper directory. Here is an example:
Open Paint Shop Pro 6.0. Set your background color by clicking the 2nd box of the overlaying boxes (on the right side of the software), and choose the desired color from the palette. This will be the background color. Click the file option and then new. A pop-up screen will appear. If you want the navigation bar to include Hw1 through Hw12, then make the width equal to 550 and the height equal to 30 (in pixels). Leave resolution as 72. For background color, choose background color. For image type, leave it as 16.7 million colors. Click open. Click the 'A' button on the left side of the screen, to enable text. Click inside the bar to bring up the text screen. Enter the desired font, size, and script (I prefer a font size of 8). Make sure that floating and antialiasing are checked. For the text color, click the box just to the left of the letter 'B' to bring up the color palette and select the desired color for the text (foreground). Enter the text, for example:
Hw1 | Hw2 | Hw3 | Hw4 | Hw5 | Hw6 | Hw7 | Hw8 | Hw9 | Hw10 | Hw11 | Hw12
Then click ok. Now click the mover icon (crossing arrows), and use this tool to align the floating text in the center of the image. When you are satisfied with the alignment, save the file using 'save as'. To view the file, close it and then re-open it. Here is an example:
You may wish to remove the excess space around the image, by cropping it. To crop the image, click the dotted rectangle button on the left of the screen. Starting at the upper left of the image near HW1, click and drag the mouse over to the lower right of the image, near Hw12. This will create a dotted rectangle around the portion of the image that you desire. Then click the edit menu option and copy. Click the edit menu option again and then 'paste as new image'. Now save this image using 'save as'. Here is an example of the cropped image:
Here is an example of a Paint Shop Pro screen containing both images.
For your navigation bar to be used as an imagemap, you should have each Hw be a rectangular shape and note the upper left and lower right coordinates. I suggest including as much of each area as possible. You should have 12 area shapes that are rectangles. Notice the (1,0) at the lower left of the following example. The (1,0) is the result of the mouse pointing to the upper left part of the rectangular shape for Hw1.
Notice the (38,15) at the lower left of the following example. The (38,15) is the result of the mouse pointing to the lower right part of the rectangular shape for Hw1.
Now you can determine the upper left and lower right x and y coordinates for the rest of the rectangular shapes for Hw2 through Hw12. For consistency, it should be noted that for each rectangular shape, the y coordinates should remain the same. So, for my example, the y coordinate for the upper left should always be 0 and the lower right y coordinate should always be 15. An example of the HTML might look like:
<MAP NAME="nav">
<AREA SHAPE="rect" COORDS="1,0,58,15" HREF="hw1.html">
<AREA SHAPE="rect" COORDS="67,0,169,15" HREF="hw2.html">
<AREA SHAPE="rect" COORDS="178,0,288,15" HREF="hw3.html">
.
.
.
</MAP>
<IMG USEMAP="#nav" border=0 SRC="navbarcr.gif" alt="navigation bar" width="485" height="18">