June 2010 Edition
Computer Science Department, University of Cape Town
| MSc-IT Study Material June 2010 Edition Computer Science Department, University of Cape Town |
Different shapes are defined in different ways.
Remember the origin of an image on a Web page is the top left, not bottom left as you may be used to with graphs on paper and in mathematics classes.
A RECTANGLE can be defined in many different ways, the most common two methods are to state the X and Y coordinates of the corner closest to the origin (0,0), and then to either state the coordinates of the opposite corner, or to state the width and height of the rectangle. The developers of HTML decided to define rectangles with four coordinates, where the first two are the X and Y values for the top left corner, and then the X and Y coordinates for the bottom right corner.
A CIRCLE can be defined easily defined using three values, the X and Y coordinates of the centre of the circle, and the radius of the circle.
A POLYGON is a shape whose edges are defined by a set of straight lines: squares, rectangles, triangles, hexagons are all examples of polygons. Since different polygons can have different numbers of sides, polygon areas for maps are defined simply by a sequence of pairs of (X, Y) coordinates for the end points of each straight line.
It is possible to use polygons to define rectangles, and even to approximate circles: some people just use polygons for all areas, although for rectangles and circles this results in more points being defined than necessary.
Suggested completed summary statements are as follows:
Image maps allow a Web page designer to make areas of an image to behave differently.
Each defined area can be rectangular, circular or a many-sided shape defined by a polygon.
A rect area is defined with 4 coordinates.
A circle area is defined with 3 coordinates.
A poly area is defined with an even number of values, representing coordinates for each point defining its boundries.
The title attribute of <area...> tags can be used to make a piece of text appear next to the mouse pointer when it is over a defined area.
An area can be made to execute a line of Javascript in response to onMouseOver and onMouseOut event.
In the early days image maps were implemented using server-side techniques. These days most people write client-side image maps.
An image changing when a mouse pointer moves over or away from it is called image rollover.
You will have created or located a picture (or perhaps a photograph) of different vegetables. This file should be copied to a directory you have created called "on_line_grocer".
You will have created an HTML file that when displayed looks something like the following:
The source of your HTML file will look something like the following (although you will more than likely be using a PNG image rather than a GIF):
<HTML>
<BODY>
<H1>Mr Green's On-line Groceries</H1>
<p>Click on the food you wish to order...
<p>
<IMG src="foods.gif" >
</BODY>
</HTML>
You will have created an HTML file that, when displayed, looks something like the following:
The source of your HTML file will look something like the following:
<HTML>
<BODY>
<H1>Mr Green's On-line Groceries</H1>
Sorry we are presently out of stock of your selected food
</BODY>
</HTML>
You will have amended your HTML file so that, while is does not appear any different when displayed, a rectangular region is now linked to your "out_of_stock.html" file.
The rectangle created around the strawberries for the foods.gif image is illustrated below:
Your HTML code should look similar to the following (this complete.html file can be found in the file food2.html):
<HTML>
<BODY>
<H1>Mr Green's On-line Groceries</H1>
Click on the food you wish to order...
<p>
<IMG src="foods.gif" alt="foods for purchase" usemap="#fruit_and_veg" border="0">
<map name="fruit_and_veg">
<area shape="rect" coords="178,0,271,62" href="out_of_stock.html">
</map>
</BODY>
</HTML>
When the mouse is over your rectangular area the title text should be displayed by the mouse pointer. For example for our image the screen looks as follows:
The only change to the code of the map is to add the "title" attribute to the <area ... /> line.
For our example we changed the line from:
<area shape="rect" coords="178,0,271,62" href="out_of_stock.html">
to
<area shape="rect" title="Strawberries" coords="178,0,271,62" href="out_of_stock.html">
The rectangle and circle shapes should be easy with the 'rect' and 'circle' shapes.
The green triangle and purple tree can be achieved with the 'poly' shape.
The black oval is more difficult, and would usually either be implemented by a bounding rectangle, or approximated with a 'poly' polygon of 4-8 sides.
The listing for an imagemap for these shapes (and also defining the title text) is as follows:
<map name="shapes">
<area shape="rect" coords="47,42,159,129" nohref title="Red Rectangle">
<area shape="circle" coords="112,205,32" nohref title="Blue Circle">
<area shape="poly" coords="117,275,147,332,69,316,116,276,116,276" nohref title="Green Triangle">
<area shape="poly" coords="273,167,269,224,255,256,248,257,229,214,226,155,235,103,248,83,257,89,268,118,273,164" nohref title="Black Oval">
<area shape="poly" coords="374,259,375,226,409,226,385,185,398,185,368,150,379,148,342,118,324,150,347,154,338,189,356,187,324,224,365,226,365,260,375,259" nohref title="Purple Tree">
</map>
As can be seen, for shapes like the oval and tree, many sided polygons are needed, and effective image map creation requires the use of tools, since hand calculation and coding of such lists of coordinates is very time consuming.
The.html files simply have to display the heading "GlowWarm" products and the appropriate image.
The index.html file, including image map, should look something like the following:
<html>
<h1>GlowWarm Products<h1>
<img src=home.gif usemap="#home" border="0">
<map name="home">
<area shape="rect" coords="47,41,249,79" href="products.html" title="Link to products page"
onMouseOver="parent.location.href='products.html' ">
<area shape="rect" coords="86,80,272,118" href="contact.html" title="Link to contact page"
onMouseOver="parent.location.href='contact.html' ">
<area shape="default" nohref>
</map>
For each file, there should be two active areas defined in the image map — for the two other files. So in the index.html file there are image map areas defined to link to products.html and contact.html. For the products.html file there are links to index.html and contact.html, and so on.
The index.html file needs to load the about_nav.html file into the left hand frame and the about.html file into the right hand frame:
<html>
<frameset cols="480,*" border=1>
<frame src="about_nav.html" name="navbar">
<frame src="about.html" name="content">
</frameset>
</html>
The about_nav.html file simple needs to display the about_nav.gif image, and set up the image map:
<html>
<img src="about_nav.gif" usemap="#about_nav" border="0">
<map name="about_nav">
<area shape="rect" coords="38,43,249,79" nohref title="" onMouseOver="parent.frames[1].location.href='products.html' ; parent.frames[0].location.href='products_nav.html'">
<area shape="rect" coords="83,80,264,118" nohref title="" onMouseOver="parent.frames[1].location.href='contact.html' ; parent.frames[0].location.href='contact_nav.html'">
</map>
</html>
As you can see in the code above, there are two areas defined, one for products and one for contact.
For each area there are two Javascript lines for the onMouseOver attribute. For example when the mouse pointer goes over the products area:
onMouseOver="
parent.frames[1].location.href='products.html' ; parent.frames[0].location.href='products_nav.html'
">
First the products.html file is loaded into the right hand frame (frames[1]) then the products_nav.html file is loaded into the left hand frame (frames[0]). The semi-colon allows more than one Javascript statement to be defined for an onMouseOver or onMouseOut attribute.
<FRAMESET ROWS = "18%,72%">
<FRAME src="a.html">
<FRAMESET COLS="33%,33%,33%">
<FRAME src="b.html">
<FRAMESET ROWS="20%,80%">
<FRAME src=c.html>
<FRAME src=d.html>
</FRAMESET>
<FRAME src=e.html>
</FRAMESET>
</FRAMESET>
</HTML>
<FRAMESET ROWS = "10%,90%">
<FRAME src="a.html">
<FRAMESET COLS="80%,20%">
<FRAMESET ROWS="20%,80%">
<FRAME src=b.html>
<FRAME src=c.html>
</FRAMESET>
<FRAME src=d.html>
</FRAMESET>
</FRAMESET>
</HTML>
There are three kinds of shape: rectangular (rect), circular (circle) and polygon (poly).
Any shape that is not rectangular or circular can be approximated with a many-sided polygon.
Client-side image maps are more portable, since all that is required is the image and the Web page that displays the image and contains the image map. Server side image maps require CGI programmes like imagemap, and the map stays located on the server.
Client-side image maps can be stored on non-CGI devices, like at set of Web pages on a static CD-ROM for example.
We shall consider the answer separately for rectangular areas (rect) and for circular areas (circle).
It is possible to define rectangular areas with polygons. This takes a little more code in the.html file (since four points need to be defined, not just two). But there is significantly more processing involved in deciding if the mouse is inside a polygon, compared to whether the mouse cursor is inside a rectangle.
Circular areas can be approximated with polygons (in fact in any digital imaging system circles must always be approximated). A circle can be defined with three values using circle, but to approximate a curve with a polygon can take 10s or even 100s of lines, depending on the size of the circle. Also, the algorithm to determine if a mouse pointer is within a circular area can sometimes be written simpler than the one to determine if a cursor is inside a polygon (depending on the number of sides in the polygon).
So, there are both HTML file size, and algorithmic processing efficiency reasons, for using rect and circle wherever possible.
There are times when such an approach is useful. For example recall the Bulldog South Africa map, where the user does desire the location of the nearest store to where they click.
However, for images made up of several visual components, it can be frustrating to users to clearly click away from one visual object, but to be taken to that object's hyperlink. Better in these cases to define areas around each visual object, and leave the other parts of the image inactive.
Many Web designers give some leeway, so where one object in an image is not right next to another, the area defined is a little out from the visual object itself — if using rectangles or circles to approximate the shapes of objects, you should err on the side of caution, and ensure the whole object is inside your area. What should be avoided wherever possible is creating pages where a user clearly clicks on a part of an object, but that part of the object is outside of the defined area, and so nothing happens.