Introduction to the Internet-lesson 6- the image map and effective Web search

Lesson 6
Learning Outcomes
This lesson will invite you to continue your investigation of the Internet and how to effectively search it. We will also learn another new HTML command: the image map. It is expected that you will use previously learned HTML commands and practices and that the new commands will build towards subsequent lessons in HTML.
When you have completed this lesson, you should be able to:
Determine whether a research question is specific or exploratory.
Formulate an effective Web search strategy to answer research questions.
Use Web search tools including search engines, Web directories, metasearch engines, and Web bibliographies effectively.
Apply Boolean logic and filtering techniques to improve your Web searches.
Perform complex searches in search engines.
Use advanced search options in Web search engines.
Assess the validity and quality of Web research resources.
Compare and contrast how Europeans and North Americans handled the emergence of the Internet.
Create a simple Web page using an image map that includes at least two click-able regions and uses the following tags: map, area, href, nohref and img (HTML Practice Exercise #6).
Textbook Readings
Please keep in mind the preceding intended learning outcomes while reading the assigned chapters from The Internet, 9th Edition, Schneider/Evans, Course Technology, Cengage Learning.

Tutorial 3: Searching the Web
SAMS Reading
This reading will prepare you for the HTML Practice exercises that accompany the first eight lessons and Assignment #5, your Web site, by explaining the basic concepts and tools that are needed to create Web pages.
OLD BOOK
REVIEW HOUR 11: Using Images in Your Web Site

NEW BOOK
Review Chapter 8: Working with Images on the Web
HTML Practice Exercise #6

Since Lesson 1, you have been expanding your knowledge of HTML codes through a series of HTML practice exercises.  These exercises, used in conjunction with the assignments, will culminate in a complete Web site.

In this exercise, you will learn how to create an image map. This image map may be used for your final Web project (Assignment #5).

Image Maps in HTML

An image map is a clickable image which can have different areas link to different URLs. (An example is below.) To make an image maps, you need to add two groups of codes into your Web page – the first is a map section, which contains area definitions, and the second is a special img tag, with an add-on to make it use the map.

NOTE: When you create a image map as part of your document, you should always create text links to compliment the image links. This allows users of non-graphic browsers or those with the images turned off to fully access your page. It also acts as a back up should your image fail to load.

A. The map tag

This is where you assign a name to your image map, which you will need to use later in the img tag. The name is a required parameter of the map tag, and the map will not work without it. When used, a map tag will look like this:

<map name=”put name here” >
Area Tags Go In Here…
</map>
Note that the map tag must be closed at the end.

B. The area tag

This is where you assign the individual clickable areas of your image. The area tag has three required parameters – the shape, the coords, and the href parameter. If an area tag is made without all three, your image map will not work! Here is an example area tag (note that the things in {}’s are not what you actually put there. Read on for explanations of those.)

<area shape=”{put shape type here}” coords=”{put coordinates here}” href=”{put URL here}” />

C. Shape and coords:

There are three shapes that can be used for an image map – circle, rect, and poly. Each of the shapes requires a different number of numbers in the coords parameter. The order of the area tags is very important – the first area tag that mentions an area is the one which is used, so you should make sure you set your small areas first, and the large ones (which may wrap around small ones) last.
For a circle, you must specify three numbers: The X and Y coordinates of the center of the circle, and the radius.

eg. <area shape=”circle” coords=”284,131,60″ href=” link.htm” />
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.
eg. <area shape=”rect” coords=”91,148,194,262″ href=”link.htm” />
poly is the last type of area tag. 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.
eg. <area shape=”poly” coords=”203,213,203,387,325,336″ href=”link.htm” />
href or nohref – Last is the destination for your clickable area, which is specified by the href field, in exactly the same manner as the href parameter of the <a> tag. Optionally, if you wish to specify an area, which does not react to being clicked on, you can replace the href parameter with nohref.
For example of nohref:
<area shape=”default” nohref />
Thus, any area not defined will not react to being clicked on.
The <img /> tag used here is exactly the same as the normal one, with one addition – you must add a usemap parameter to it, which points to the map you created previously in your document. For example, an image map that uses a map named “binky” would look like this:
<img src=”clown.gif” alt=”[clown image map]” usemap=”#binky” />

D. How to find the coordinates:

To make any type of image map, you need to figure out the numerical pixel coordinates of each region within the image that you want to turn into a clickable link. An easy way to do this is to open the image with Paint Shop Pro (www.jasc.com) and watch the coordinates at the bottom of the screen as you use your mouse. You can use any portion of a image you wish. To do so, you would first need to decide which region of the image should be linked to each Web page. You can use rectangles, circles, and irregular polygons as regions. Once you have the coordinates written down, you’re ready to create an image map.

E. To Do

Try creating an image map in the Web site you’re working on for Assignment 5 using the following code as a guide and inserting your own image and coordinates.

A Full Example:

<map name=”map1″>
<area shape=”circle” coords=”284,131,60″ href=” link1.htm” />
<area shape=”poly” coords=”203,213,203,387,325,336″ href=”link2.htm” />
<area shape=”rect” coords=”91,148,194,262″ href=” link3.htm” />
<area shape=”poly” coords=” 23,142,194,141,194,12,118,30,69,62″ href=”link4.htm” />
<area shape=”circle” coords=”199,199,190″ href=” link5.htm” />
<area shape=”default” nohref />
</map>

<img src=”map1.gif” border=0 usemap=”#map1″ alt=” [Image Map]” />
Next Step

If you can meet the objectives stated at the beginning of Lesson 6, you are ready to proceed to the next lesson. Keep in mind the weekly schedule recommended in the course syllabus.

Please post to the Discussion area of this course Web site any questions or comments related to this lesson. Only emergency and private messages should be sent through the E-mail Instructor component of the site.
Assignment
Continue working on Assignments #4 and #5. Details can be found on the course Web site under the Assignments portion.