Tag

Inside the container

• one or more elements< >... These elements have no content, but define the geometrical regions of the image map and the hyperlinks associated with each region.
• block level content. This content must include< >that specify the geometrical regions of the map and the links associated with each region

If the tag

If regions overlap, the region defining element that appears earlier in the document takes precedence.

Html: 3.2 | 4 / XHTML: 1.0 | 1.1

Syntax

Attributes

class	defines the name of the class to use
dir	defines the direction of characters: ltr - from left to right rtl - right to left
id	unique identificator
lang	defines the language of the displayed document
name	name of the image map. Used as the value of the usemap tag parameter
onblur	loss of focus element
onclick	click on an element
ondblclick	double click on an element
onfocus	getting focus by element
onkeydown	pressing a key when an element has focus
onkeypress	pressing and releasing a key when the element has focus
onkeyup	release the previously pressed key when the element has focus
onmousedown	clicking a mouse button when an element has focus
onmousemove	movement of the mouse pointer when the element has focus
onmouseout	move the mouse pointer off the element
onmouseover	placing the mouse pointer over an element
onmouseup	releasing a previously pressed mouse button when the element has focus
style	specifies an inline style sheet
title	tooltip

Example

• the closing tag is required ()
• id attribute is required
• it is recommended to provide a textual alternative to the graphics card for those cases when graphics are not available or the user cannot get them
• it is not recommended to use map-images as the main navigation, due to poor support in old and voice browsers

Tag - block level element, i.e. the content of the tag always starts on a new line. A line break is also added after the tag.

HTML - Lesson 15. Navigation maps - map

Many html pages use so-called image maps to organize links. In this approach, an image is taken and links are anchored to its various regions. The most common example is the tourist maps of the world, you click on its part with a country and you will be taken to a page dedicated to that country.

Such image maps can be client-side and server-side. Links of client maps are stored in the document itself, and by clicking the mouse, the browser itself determines which area the coordinates of this point refer to and follows the desired link.

In the server version, these coordinates are first transmitted to the server, processed there by a special program, and only after that the link is followed. Obviously, client-side navigation maps are preferable. We will consider them.

For example, let's say that we are a home appliances store and in the header of our website we have the following picture:

Let's make a navigation map out of it, i.e. clicking on a refrigerator will take you to a page dedicated to refrigerators (with models, descriptions and prices), clicking on a vacuum cleaner and washing machine to their respective pages.

To do this, we need to describe the areas in this picture that will be links. Tags are used to describe such areas with only one parameter name, which specifies the name of the reference map and is then used to refer to this map.

Our card must be connected to our picture, for this in the tag you need to add a parameter usemap, the value of which is the name of our map after the # (hash) sign:
To describe specific areas within tags tags are used ... This tag has the following parameters:

• shape - defines the shape of the area, can take the following values:
  • rect - area in the form of a rectangle,
  • circle - an area in the form of a circle,
  • poly - area in the form of a polygon,
  • default - the whole area.
• cootds - sets the coordinates of a separate area:
  • for rect the coordinates of the upper-left and lower-right corners of the rectangle are set,
  • for circle the coordinates of the center of the circle and the radius are set,
  • for poly sets the coordinates of the vertices of the polygon in the desired order.
• href - defines the link address.
• target - is used when using frames and indicates the frame in which to load the page.
• alt - sets an alternative text for the area.

We have three areas, so there will be three tags : the first is the rectangular area around the vacuum cleaner, the second is the rectangular area around the washing machine, the third is around the refrigerator.
Now we need to determine the coordinates of these areas. In fact, this is the most time consuming process. In our example, we decided that the areas would be rectangular and made the task much easier for ourselves, but imagine how many points you need to set, for example, to circle a country on a map. However, we need to set the coordinates of the top-left and bottom-right corners of the three rectangles.

For these purposes, usually some program is used, for example, Image Ready, which has a special tool for outlining areas and automatically builds descriptions of these areas. Examining the operation of these programs is not included in the HTML course, so here we will set the coordinates "by eye". Take another look at our image:

Our image is 738 pixels wide and 192 pixels high. Let's draw lines along the borders of our areas and roughly determine the coordinates. We are now ready to add these parameters to our tags. .

Result:

Now our areas have become links (if you move the mouse cursor, it turns into a palm). There are no refrigerator pages on this site, so the links lead to the same page, but if you create the pages you want, clicking on the area will jump.

This concludes our lessons. You are now familiar with all the features of HTML. To consolidate your skills, read the two lessons Making a Website - Tabular Layout.

Finally, I must say that there are two other great elements in HTML - tags

and ... In fact, these are very important tags, but to manage them without CSS, I consider it just a "perversion", so they are described in detail in

Recently, many Web pages use so-called image maps to organize links. The implementation of this feature is provided by the HTML language and allows you to bind hypertext links to various areas of the image. This approach is clearer than the use of ordinary textual links, since the user can not read the verbal description of the link, but immediately understand its meaning in a graphic image.

Even a novice user, wandering around the Internet, will soon come across an image map. In fig. 6.1 shows the Web page of one of the largest computer firms in Russia. The main menu on this page is an image map with related links.

Launch of the well-known search engine Yahoo! also results in a page containing an image map. The top-most part of the image in the picture contains four buttons with the word "Yahoo!" in between. The cursor in the figure points to the first of these buttons, and the shape of the cursor makes it clear that the latter points to a link, the address of which is visible in the browser status bar. The links realized by these buttons are made using the image-map technology.

However, do not assume that image maps should be used wherever link clicks are required. It is necessary to consider whether the use of image maps makes sense in this or that case, weighing all the pros and cons. This chapter contains all the information you need to know about using image maps.

In this chapter, you will learn:

• What is an image map and how does it work
• How to create an image map config file
• How to create links in an HTML document using an image map

Figure: 6.1.An example of a web page in which the main menu is made using an image map

• What principles should be followed when using image maps
• What are the features of the various image map configuration file formats
• What software should you use to create image maps

Basics of using image maps

Image maps provide a friendly interface for users to navigate to other Web pages. To follow such a link, you just need to select the desired place on the image and click the mouse. Having such an advanced graphical interface is one of the significant advantages of Web pages over other Internet resources. Instead of text-based menus, similar to the Gopher client interface, users are presented with graphical representations of information (Figure 6.2).

Figure: 6.2. Visualization of links (to pages about the seven wonders of the world) using an image map

The image map looks like a regular inline image, but when you select an area on this image with the mouse cursor, you will switch to other pages. Typically, the image indicates where to click to go to a particular page. There are several ways to specify the boundaries of areas that implement various links. A frame or some other separator is often used.

Let's take a look at the basic concepts associated with the use of image maps.

Terminology

Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map - all these English terms are used in the reference literature to denote the same possibility - using an image embedded in an HTML document for which "hot" (or active) points are defined, or areas that have links to different URLs. We will describe this feature by the phrase "map-image", meaning by this a combination of several components that ensure the implementation of this concept. The main components are: the image itself, which we will call the reference for this image-map; a description of the configuration of hotspots; as well as related software.

Graphical representation of an image map

An image map is actually a simple inline graphic on a Web page. These images can be in any valid format (GIF or JPG). In this case, the GIF format can use a transparent color, as well as a line interleaving mode. In order for the image to be used as a reference for the image map, no additional restrictions are formally imposed.

Description of the image map configuration

The configuration of the image map is written in the form of plain text, which, depending on the format used, can be saved in a separate file or be part of an HTML document. The configuration description contains coordinates for each of the hotspots in the image, as well as the URLs associated with each of those hotspots. Hot spots can be rectangles, circles, and polygons. Any combination of these shapes is allowed. A single URL value can also be set, which is defined for the case where the user clicks within the image, but outside any of the specified hotspots. The specific rules for recording the area configuration depend on the selected implementation option and will be presented below.

Implementation options for image maps

The concept of an image-map on Web pages can be implemented in two different ways - a server-side imagemap and a client-side imagemap. The latter name is often used as an abbreviation CSIM. Historically, the server-side version of image maps appeared and became widespread, which was first implemented in the Mosaic browser. The server side allowed the first versions of all three major browsers to be used. The server version can be implemented in two different formats, which got their name from the names of the development organizations - NCSA and CERN.

Recently, more and more development is receiving the client version, which was first implemented in the Microsoft Internet Explorer browser. Starting with version 2.0, this option also supports the Netscape browser. This option has its undeniable advantages and is becoming more and more popular.

Advantages and Disadvantages of Image Maps

There are both positive and negative aspects to using image maps. Most of them are aesthetic, but some also have technical aspects. To create good web pages, it is important to understand the advantages and disadvantages of image maps.

Image maps are most useful in the following situations:

• To represent spatial relationships, such as geographic coordinates, that would be difficult to define with separate buttons or text. An example is a map of North America, where the selection of each state leads to the transition to the corresponding page.
• As a top-level menu that appears on every page. The presence of such a menu provides an opportunity to go to the server section of interest from any page and at any time. Creating a common graphical menu will reduce development time

HTML documents, because the same link description file will be used. Rather than linking to different parts of the home page on each page, it is sufficient to refer to the general menu. Such a menu will also make navigation easier for the user.

Despite the fact that image maps have become extremely popular, it is clear that they are not an integral part of Web pages and are not used on all pages. There are situations where image maps should not be used.

The disadvantages of image maps include the following:

• Unless an alternative text menu is provided, there are no navigation aids for users who cannot download graphics or have disabled their downloading.
• Image maps share a common disadvantage inherent in using images on Web pages, namely, a significant increase in load time compared to pure text documents.
• Poorly designed images can be confusing. It is sometimes difficult to identify the active areas in the image. This is especially difficult to do on the server side. When implementing the client option, the situation is simplified, since it is possible to move the mouse within the image and follow the appearing link addresses in the lower part of the browser window.
• When using image maps, the browser does not have the ability to color-code already traversed links as it does for text links.

Server-side implementation of image maps

Using image maps on Web pages is somewhat more complex than simply embedding interesting graphics and linking to them. To implement the server-side version of the image map, the HTML document must be located on the server. It also requires the server to be configured to support Common Gateway Interface (CGI) scripts that handle requests from the browser when working with an image map. For each image-map, a file describing the configuration of hotspots must be placed on the server. When the mouse is clicked within the image, the coordinates of the clicked location are transmitted by the browser to the server, which refers to the configuration file, which is essentially a search table of hot spots. The search result is returned to the browser in the form of a URL or a message that no hot spots were found matching the specified location in the image.

To ensure the functioning of the image card, it is necessary to indicate that this image is reference for the card. This is done by setting the ISMAP parameter in the tag ... In addition, the image map needs to be made a link on a Web page, much like using the entire image as a single link.

As a reminder, inline images can be used as hypertext links if they are included in the tag<А>... For example, to make an image named Myimage.gif a graphic pointer to a document link in the same directory named exampie.html, you would write:

<А HREF=example.html >

This HTML code tells the server that when the Mylmage.gif image is clicked, a Document named example.html should be returned to the browser.

ISMAP parameter added to tag for the given example, activates the image map. In this case, the link is not made to a specific document, but to an image map configuration file containing the coordinates of all active image areas. The configuration file, usually with the MAP extension, is parsed by a CGI program on the server, along with the coordinates of the click point in the image. Then, instead of the above line, you should write:

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

The link in this example is not the address of another HTML document, but an image map configuration file that contains coordinates for each active image area named Myimage.gif.

Note

Order of tag parameters is arbitrary, however, the ISMAP parameter is usually placed last.

A map image configuration file is a plain text file that contains information about the hotspots of a given image. Each image that will be used in map mode requires a separate configuration file.

Advice

A separate configuration file is required for each image map. Make it a rule to save the configuration file in the same directory and with the same name as the associated image. For example: main_menu.gif and main menu.map.

There are two image-map configuration file formats developed by CERN and NCSA and named by these organizations. Both of these formats contain the same information, but represent it differently. In both cases, the same types of areas are used, which will be discussed below. When developing image maps for use on a specific server, it is necessary to obtain information from the system administrator about the method of supporting image maps accepted on this server.

Both formats use hotspots in the form of rectangles, circles and polygons, and a so-called default region can be set, which characterizes all points of the region that do not belong to any of the hotspots. If the user clicks inside the image, but outside of any of the specified hotspots, then the value specified by the default type will be taken as the URL.

For each area, the configuration file records a URL that will be returned to the user when a click occurs within that area. This address can be written in both relative and absolute form. Note that the relative URL must be relative to the location of the configuration file, not the image file. The list of hot spots in the configuration file is read starting from the first line. If two areas overlap, then the link is implemented, the description of the scope of which appears first in the configuration file.

Advice

It is recommended to always set the default link in the configuration file. The default link will be implemented for image areas that are not active. In the simplest case, the default URL can simply point to a page with useful information about using the card.

CERN format

CERN is a European research center with a wide range of research topics. It was here that the concept of the World Wide Web system was developed, which was the impetus for all developments in the field of the WWW. CERN can rightfully be considered the birthplace of the Web. When it became necessary to develop the structure of the image map configuration files, the following format was proposed at CERN:

type of area coordinates url

The X and Y coordinate pairs are comma separated and enclosed in parentheses. The CERN format does not allow the use of comments to clarify links related to a particular area. The following area types can be used: rect, circle, poly, and default. This format allows for two spelling of area type names - both in abbreviated form and in full. Along with the given type names, the names rectangle, circ, and polygon can be used.

Here is an example of recording information about areas on a map-image in the CERN format:

rect (56,47) (357,265) http://www.anywhere.com/

circ (366,147) 109 http://www.anywhere.com/

polygon (534.62) (699.62) (698.236) (626.261) (534.235) (534.62)

http://www.anywhere.com/

NCSA format

The National Center for Supercomputing Applications (NCSA) at the University of Illinois has also made significant contributions to the Web. Here the first popular graphical browser was created - the Mosaic program. NCSA proposed a configuration file format that differs from the CERN format in notation. This format looks like this:

area_type url coordinates

The following area types can be used: rect, circle, poly, default, and point.

The X and Y coordinates are separated by commas, but not enclosed in parentheses. Comment lines are allowed in this format. Any line beginning with the # character will be treated as a comment and its contents will be ignored by the interpreter.

The NCSA format offers a slightly different way to define circular regions (compared to the CERN format and the client-side option discussed below). The circular area is specified by the coordinates of two points - the center and any point lying on the circle.

Note

The NCSA format accepts the point area type. This area type does not apply in CERN format or when using the client-side imaging maps. The intention of the creators of the format was that in the presence of a number of point regions, a click of the mouse would activate a link that was closer than others. However, the presence of this type of area, in essence, conflicts with the type of the default area, since when using the point and default areas at the same time, the implementation of the reference defined by the point type is possible only when the exact point is hit with the mouse. This is quite difficult and is unlikely to create a comfortable environment when working with such a document. Currently, the point type is practically not used, and the client version of image maps is getting more and more development.

Here is an example of writing a configuration file in NCSA format:

# An example of writing a configuration file

rect http://www.anywhere.com/ 56.47 357.265

circle http://www.anywhere.com/ 366.147 366.256

poly http://www.anywhere.com/ 534.62 699.62 698.236 626.261 534.235 534.62

Image-map client option

The client-side version of the image-map allows you to place all the information about the configuration of the map in an HTML-file in which the image is embedded. If the server version is used, the browser sends a request to the server to obtain the address of the selected link and waits for a response with the required information. This may require additional waiting times. With the client option, the number of requests to the server decreases and the speed of access to information increases. In this version, there is no need to contact the server to edit the map configuration, so all the work on creating the image map can be done locally, simultaneously with editing the HTML file. In contrast to the server version, in which a separate configuration file was required for each image map, in this version the map configuration can be located directly in the same HTML document in which the reference to the reference image is set. Most often, this is exactly what they do, although it is permissible to save the map configuration in a separate file and give a link to it.

To indicate that the inline image is the reference for the map, use the USEMAP tag parameter ... The value of the USEMAP parameter is a link to the description of the map configuration.

Note

The Netscape browser does not allow a separate file to describe the card configuration.

For instance:

In this example, the image stored in a file named l ogo.gif is the reference for the client-side image-map.

Hotspot configuration descriptions should be located in the same file as this line of HTML code and named logo for this example.

Tag<МАР>

A special tag is used to describe the configuration of image-map areas<МАР>whose only parameter is NAME. The value for the NAME parameter specifies the name that must match the name in USEMAP. Tag<МАР> requires an end tag... Inside this pair of tags, descriptions of the active areas of the map should be located, for which a special tag is used .

Tag

Every single tag specifies one hotspot. No end tag required. Hot spots can overlap. If a point refers simultaneously to several active areas, then the link, the description of which is located first in the list of areas, will be implemented.

Tag parameters are SHAPE, COORDS, HREF, NOHREF, TARGET, and ALT. Let's consider the purpose of these parameters.

SHAPE parameter

The SHAPE parameter determines the shape of the hotspot. Valid values \u200b\u200bare rect, circle, poly, default. These values \u200b\u200bdefine areas in the form of a rectangle, circle, polygon. The last value, default, defines all points in the region. If SHAPE is omitted, the default is rect, which is a rectangular area.

Warning

Do not confuse the default scope, which describes all the pixels in the image, and the default SHAPE parameter, which is rect.

Note

In contrast to the server version, where the default area defines all points in the image that do not belong to any active area, for the client version the default area defines all the image points in general. Therefore, in this case, the description of the default area should be the last in the list of hot areas. If, for example, the description of the default area is put first, then the link defined by this area will always be implemented for the client version, and all other links will be ignored (this is how this type of area is implemented in Netscape). For the server side, the location of the default scope description does not matter. This difference is taken into account in the examples at the end of the chapter.

Advice

Note also that not all browsers support the default scope type. In particular, Microsoft Internet Explorer does not allow this type of region at all. Therefore, instead of an area of \u200b\u200bthe default type, we can recommend setting a rectangular area with dimensions equal to the dimensions of the entire image. Naturally, such an area should be described last. This is exactly what some map-image editing programs do, which will be discussed below.

Parameter COORDS

The COORDS parameter sets the coordinates of a separate active area. The parameter value is a comma separated list of coordinates of points defining the hot spot. Coordinates are written as non-negative integers. The origin is located in the upper left corner of the image, which corresponds to a value of 0.0. The first number defines the horizontal coordinate, the second - vertical. The list of coordinates depends on the type of area.

For an area of \u200b\u200btype rect, the coordinates of the upper-left and lower-right corners of the rectangle are specified.

For an area of \u200b\u200btype circle, three numbers are specified - the coordinates of the center of the circle and the radius.

For an area of \u200b\u200btype poly, the coordinates of the vertices of the polygon are set in the desired order. Note that the last point in the coordinate list does not have to be the same as the first. If they do not match, then when interpreting the data for that region shape, the browser will automatically connect the last point to the first. Different image map editors work differently in this regard - some add the first dot to the end of the list, while others do not. Quantitative restrictions on the number of peaks are quite large and cover almost all imaginable needs. At least a polygon with 100 vertices is handled with confidence by all major browsers. There is a limitation due to the HTML language itself, according to which the list cannot contain more than 1024 values. The polygon may well be non-convex.

The default scope does not require specifying coordinates.

HREF and NOHREF parameters

The HREF and NOHREF options are mutually exclusive. If none of these parameters are specified, then there is no reference for this area. The same is explicitly defined by the NOHREF parameter, which does not require a value. The HREF parameter defines the link address, which can be written in absolute or relative form. Recording rules completely coincide with the rules for recording links in a tag<А>.

The NOHREF parameter is useful for excluding part of the hotspot. For example, suppose you want to create a hotspot in the form of a ring. This type of region is not included in the list of possible regions, but it can be implemented by defining two circular regions. To do this, first set the area with a smaller radius and specify NOHREF as the parameter. Next, you need to define an area with a larger radius centered at the same point and specify the desired link. Then the area inside the ring, defined by two circles of different radii, will have the necessary reference. Using an approach based on overlapping areas will allow you to build areas of very diverse shapes.

TARGET parameter

The TARGET parameter is used when working with frames. Its purpose is to specify the name of the frame in which the document loaded by this link will be placed. For more information on using this parameter, see the chapter on working with frames.

ALT parameter

The ALT parameter allows you to write alternative text for each of the active image areas. As such, this text will only act as a commentary for the creator of the document. If the alt text recorded for the entire image (in the tag ), serves to display it on the screen when working with disabled image loading, then the alternative text for active areas will never appear on the screen.

Let's give an example of defining areas of different types:

<МАР NAME="logo">

!}

HREF \u003d "p.htm" ALT \u003d "(! LANG: Polygon"> !}

This piece of code is located in an HTML file. Often all descriptions of image maps of one document are brought together and placed at the beginning of a section. document. This approach is close to programmers, who usually, when writing programs, separate the descriptive part of the program and the executable, which makes it easier to understand the written code, and sometimes it is determined by the requirements of the compiler.

Combination of client and server options

It is permissible to use a combined version, in which both USEMAP and ISMAP parameters are defined for the same image, which implies the use of this image as a reference for both the client and server versions. USEMAP is dominant. This means that a browser that supports the client will use USEMAP, ignoring the ISMAP parameter. Browsers that do not support the client-side option and do not understand the purpose of the USEMAP parameter, according to general HTML rules, will ignore its presence and will implement the server-side option when they detect the presence of the ISMAP parameter. The combined option is more reliable, but requires area configuration data for both options. Nowadays, the need to use the combo option is decreasing, as all major browsers support the client option. However, the Netscape homepages that any user of the Netscape browser will likely come across are made in a combination.

Here's an example of a combined option:

<А HREF="http://www.anywhere.com/testmap/logo.map">

Note

The USEMAP parameter is also dominant over the link defined by the tag<А>... So, if the image used to implement the concept of the image-map in the client version is written inside the scope of the tag<А HREF>then the link identified by the last tag will be ignored by browsers that support the client-side option. For example, suppose you have the following snippet:

<А HREF=NoMaps.htm> .

On the one hand, the entire image is a link to a document named NoMaps.htm. On the other hand, the presence of the USEMAP parameter defines this image as a reference for the corresponding image map. The link to the NoMaps.htm document will be ignored due to the presence of the USEMAP parameter and regardless of other factors.

Features of using image maps

Let's note some peculiarities in the use of image-maps in the client version. When the user moves the mouse within the client-side image, the corresponding URL is displayed in the status bar at the bottom of the Netscape browser. In the server-side version, the URL is not displayed because this information is hosted on the server and is not available until the user clicks on the image. The first option is more informative, since the user sees the URLs of the links, and can also determine the places of the image without links. In the server version, numbers are displayed that are relative coordinates of the mouse on the image and do not give any information about links and their presence.

Alternative navigation aids

While the use of image maps has become commonplace, keep in mind that not all Web users are yet able to use graphics or want to turn off image loading to reduce file transfer times. Therefore, you need to provide for them some other, alternative means of navigation on the page. Otherwise, users will not be able to find on the page at all and, accordingly, implement those links that are defined only by the image-map.

Alternatively, you can create a separate section with textual descriptions of links and corresponding URLs. You can also link to a text menu that has the same links as the image map. Whichever approach you choose, you need to ensure that all links are available for the browser's text mode.

Let us give an example of a really existing document that resolves these issues. One of the pages of the well-known company Hewlett-Packard shows a fragment in which there is a map-image. In the middle of the page, there is a list of ten different types of equipment, each with a link to the corresponding document. In fact, there is a picture on the page, which is a reference image for the map. In this image, ten rectangular zones are highlighted as hotspots.

If you load this page with the image loading mode disabled, you will see a picture where instead of an image map there is only a small icon showing the location of the image and. text that was set as an alternative for the entire given image. Obviously, you won't be able to use the links here. To resolve this issue, below the image there is a regular text menu, which completely repeats the list shown in the image, with the corresponding links. Therefore, if the loading of images is disabled, the user will still be able to implement the necessary transitions on the links using the duplicate text menu. If an image is loaded, the text menu only duplicates the options for selecting links.

Imaging tools

Creation of image maps requires two steps: preparation of a reference image, on which hotspots will be defined later, and development of a configuration file describing the geometric parameters of hotspots. Preparing an image, which will be the basis for an image map, is no different from the work of preparing ordinary images for embedded in Web pages. To do this, you can use any graphics editor or use a ready-made image.

In the second step, it is necessary to mark the active areas in the image and associate them with the corresponding link addresses. Preparing the configuration file is the most difficult step in creating image maps. In principle, a manual method of setting the boundaries of active areas in the image is possible. For example, when working in a graphical editor, you can mark individual points, write down their coordinates and then create a file for describing the geometric parameters of the selected areas. However, this approach is extremely inconvenient and cumbersome.

To automate the process of marking areas in an image, there are a number of programs, most of which are very similar to each other. They allow you to create and modify configuration files by working directly with the image on the screen. Most of the programs are standalone utilities that work autonomously and, in essence, are an addition to HTML editors. These programs allow you to save the generated configuration file either to the Windows clipboard or to a file on disk. In the first case, a typical option is the joint work of a program for editing a map-image and an HTML editor or a regular text editor. If the program allows you to save the configuration file to disk, then it can be used completely offline. All programs allow you to mark areas on the image of three basic types - rect, circle and poly. Some editors support the default type. Perhaps the only criterion for choosing a program for editing map-images is its ease of use, since all programs are very similar in their functional properties. If the program interface seems uncomfortable to you, you can refuse to use it and choose another one.

Let's consider some of the existing programs.

MapEdit program

One of the most simple and well-known configuration file editing programs is the MapEdit utility developed by Thomas Boutell. This program has been around for several years and has been implemented for various platforms. In particular, there are versions for Windows 3.x and Windows 95/98 / NT. As with most programs, there were several versions of this utility. Currently, the latest version available for Windows 95/98 / NT is version 2.6 (September 1999). Information about the program can be obtained at:

http: //www.boutell.cora/mapedit/

MapEdit is shareware and has a 30-day evaluation period, after which registration is required. The program is small in size - the distribution kit takes about 300 KB, and at the same time has almost all the necessary features.

The program allows editing configuration files both for the server version (in the NCSA and CERN formats) and for the client. It is possible to visually create hotspots in the form of rectangles, circles and polygons, as well as to define a link address for the default area.

Let's briefly consider the main features of this program. After starting MapEdit, the main window is displayed containing a splash screen (Fig. 6.3) and a menu. It is possible to edit existing files for both server and client versions of image maps. It is also possible to create a new configuration file, but this applies only to the server version. The client version requires a source HTML file with links to embedded images that will be used as reference for map images.

Note

The inability to create a new HTML file using MapEdit can be easily circumvented. To do this, run the program in the file creation mode in one of the server-side formats (NCSA and CERN), perform all the necessary actions, and then save the results in the Save as mode, specifying the Client Side Map format. An HTML file will be created, which can later be used as a ready-made fragment of an HTML document.

Let's say we need to create a new configuration file for the server version of image maps. Select the Open / Create Map item from the menu

File. A dialog box will appear (Fig. 6.4), in which you should specify the name of the configuration file to be created (for example, Blazons.map), specify the existing image file and the format of the file to be created (NCSA or CERN). The image file can be in GIF, JPG, or PNG format.

Figure: 6. 3 . MapEdit splash screen

Figure: 6. 4 . Open / Create Map dialog for creating a configuration file

Note

Many of the server-side configuration file interpreters require the file to have the MAP extension. We recommend that you always adhere to this rule.

The program will load the selected image file on which it will be possible to mark the active areas (Fig. 6.5).

To do this, you need to select the shape of the active area - a rectangle, circle or rectangle by clicking the appropriate icon or selecting the desired item from the Tools menu (Fig. 6.6).

Further actions are performed directly on the image by marking points with the mouse. For a rectangular area, mark the upper left and lower right corners, for a circular area - the center and one of the points on the circle, for the polygon its vertices are set. For example, in Fig. 6.5 shows the case when three active regions of different shapes are already marked on the image. Note that the lines bounding the active areas serve only for their visualization when working in the editor and do not change the image file in any way. The image in this example essentially contains three separate images (the coats of arms of the cities of St. Petersburg, Tomsk and Yakutsk are shown), which is usually not typical for realistic images. However, for images containing, for example, a set of control buttons, this situation is quite typical.

Figure: 6. 5 . Image with marked active areas of various types

Figure: 6. 6 . Tools menu

Figure: 6. 7 . Object URL dialog for specifying the URL and optional comment

After marking up any of the areas, you should set the link address corresponding to this area, as well as commenting information (Fig. 6.7). You can set the default link address for the area, which will be implemented for a part of the image area that is not included in any of the active areas (Fig. 6.8).

After marking the areas, you can visually check or change the created hotspots using the Test item of the Edit menu. The last step of the work is to save the results as a configuration file (Save item of the File menu). You can also use the Save As item, in which you can set the required file saving format (Fig. 6.9).

Figure: 6. 8 . Default URL Dialog Box to Set the URL for the Default Realm

Figure: 6. 9 . Save As Command Dialog Box

Note

Older versions of MapEdit contained a small bug related to setting the format of the saved configuration file. If the CERN format was specified when creating the file, then when saving data in the Save mode, the file will still be saved in the NCSA format. It is possible to create a CERN format file only when using the Save as mode specifying the required format.

For this example, a file named Blazons.map will be created containing the following information (NCSA format):

# Coat of arms of the city of Tomsk

rect www.ifmo.ru/sergeev/tomsk.htm 35.58 187.244

# Coat of arms of the city of Yakutsk

circle www.ifmo.ru/sergeev/jakutsk.htm 364.150 468.150

# Coat of arms of the city of St. Petersburg

poly www.ifmo.ru/sergeev/Spb.htm 537.61 700.61 700.230 618.256 537.231

The same data saved by the editor in CERN format will look like this:

rect (35.58) (187.244) www.ifmo.ru/sergeev/tomsk.htm circle (364.150) 104 www.ifmo.ru/sergeev/jakutsk.htm poly (537.61) (700.61) (700.230) (618,256) (537,231) www.ifmo.ru/sergeev/Spb.htm

Note that comments in this format are not allowed, so this information will be lost when the file is saved.

Consider the task of creating a client version of an image map. To solve this problem, you must have an HTML source file that contains at least one embedded image. This source file can be created in advance by any text editor or special HTML editor. Let's have a file named CSIM.HTM containing the following code:

This file should be opened in MapEdit (Fig. 6.10). Unlike the variant in which the configuration file was created, there is no need to specify the name of the file with the image in the Open / Create Map menu item.

Figure: 6.1 0 . Open / Create Map dialog for opening an existing HTML file

Figure: 6.1 1 . Select Inline Image Dialog Box

After opening the source HTML file, the editor will display a dialog box with a list of all embedded images, from which you need to select the one you want (Fig. 6.11). Of course, the file with the selected image must exist.

Further work on marking active areas is completely identical to the previous case. After saving the markup results, the original file will be modified, and for the given example it will look like this:

href \u003d "tomsk.htm"\u003e

href \u003d "jakutsk.htm"\u003e

coords \u003d "537,61,700,61, 700, 230, 618, 256, 537,231" href \u003d "Spb.htm"\u003e

Note that the editor automatically assigns a name for the image map description, which is the same as the file name of the reference image. For this example, the image file was named Blazons.gif, so the name parameter of the tag<тар> was assigned the value "Blazons".

Note

The MapEdit editor does not quite work correctly with the characters of the Russian alphabet. Some of the Russian letters disappear when the file is saved and spaces appear in their place. The easiest way out of this situation is to add Russian text after finishing work in the editor.

Map THIS!

Another utility for creating and editing configuration files of image maps is the Map THIS! Program, information about which can be obtained at:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

Working with this program is similar in ideology to the MapEdit program. The basis of working with the program is the visual design of active areas with further saving the results in a file in one of the selected formats. The editor supports both server-side image maps (NCSA and CERN) and client-side. Images can be loaded from GIF and JPG files.

Here are examples of configuration files created by this program. For the example given in the previous section, the file saved in NCSA format would look like this:

# $ MTIMFH

# $ -: Image Map file created by Map THIS!

# $ -: Map THIS! free image map editor by Todd C. Wilson

# $ -: Please do not edit lines starting with "# $"

# $ VERSION: 1.30

# $ TITLE: Blazons

# $ DESCRIPTION: Server-side image map

# $ DATE: Tue Sep 14 12:10:42 1999

# $ PATH: С: \\ Program Files \\ Mapthis \\

# $ GIF: Blazons.gif

# $ FORMAT: ncsa

# $ EOH

default default.htm

# Coat of arms of the city of Tomsk

rect Tomsk.htm 33.60 191.246

# Coat of arms of the city of Yakutsk

circle Jakutsk.htm 366.147 366.256

# Coat of arms of the city of St. Petersburg

poly Spb.htm 534.62 699.62 698.236 626.261 534.235 534.62

Unlike the MapEdit program, this editor writes a lot of commenting information to the output file, including brief information about the program itself, the date the file was created, etc. At the same time, after the # symbol indicating the beginning of the comment line, the editor adds the $ symbol for comment lines, created by the editor itself. Pay attention to the fourth line of the above code, which contains a request not to edit the comments inserted by the editor.

The same example saved in CERN format would be:

rect (4096,4096) (4096,4096) mt: # $ MTIMFH

rect (4096,4096) (4096,4096) mt: # $ -: Image Map file created by Map THIS!

rect (4096,4096) (4096,4096) mt: # $ -: Map THIS! free image map editor

by Todd C. Wilson

rect (4096,4096) (4096,4096) mt: # $ -: Please do not edit lines starting

with "# $"

rect (4096,4096) (4096,4096) mt: # $ VERSION: 1.30

rect (4096,4096) (4096,4096) mt: # $ TITLE: Blazons

rect (4096,4096) (4096,4096) mt: # $ DESCRIPTION: Server variant

image maps

rect (4096,4096) (4096,4096) mt: # $

rect (4096,4096) (4096,4096) mt: # $ DATE: Tue Sep 14 12:10:42 1999

rect (4096,4096) (4096,4096) mt: # $ PATH: C: \\ Program Files \\ Mapthis \\

rect (4096,4096) (4096,4096) mt: # $ GIF: Blazons.gif

rect (4096,4096) (4096,4096) mt: # $ FORMAT: cern

rect (4096,4096) (4096,4096) mt: # $ EOH

default default.htm

rect (4096,4096) (4096,4096) mt: # Coat of arms of the city of Tomsk

rectangle (33,60) (191,246) Tomsk.htm

rect (4096,4096) (4096,4096) mt: # Coat of arms of the city of Yakutsk

circ (366,147) 109 Jakutsk.htm

rect (4096,4096) (4096,4096) mt: # Coat of arms of St. Petersburg

polygon (534.62) (699.62) (698.236) (626.261) (534.235) (534.62) Spb.htm

As you can see from the code above, the editor uses a somewhat artificial trick to save comments, both user-supplied and generated by the program itself. Recall that the CERN format does not allow setting comment lines, so the editor creates a line like

rect (4096,4096) (4096,4096),

at the end of which you can place any text. In essence, such a line describes a rectangle that is obviously located outside the screen, so its presence does not matter. Of course, this makes the text of the configuration file much more cumbersome and inconvenient for reading, which, however, does not interfere with the work of programs. This technique of saving comments can be adopted.

The same example saved as an HTML file (for the client version of image maps) will look like:

<МАР NAME="Blazons">

ALT \u003d "(! LANG: Coat of arms of the city of Tomsk"> !}

ALT \u003d "(! LANG: Coat of arms of the city of Yakutsk"> !}

HREF \u003d "Spb.htm" ALT \u003d "(! LANG: Coat of arms of St. Petersburg"> !}

Here, unlike the MapEdit program, the name of the image map must be specified manually, so it may not be the same as the file name with the reference image.

CrossEye program

CrossEye configuration file editor, created by the famous Australian company Sausage Software. This program will be greeted with joy by fans of the popular HTML-editor HotDog, as it is created by the same company and has a very attractive, humorous interface.

Information about the CrossEye package can be obtained at:

http://www.sausage.com.au.

Distinctive features of the program are a rather large size of the distribution kit (about 2.5 MB), as well as a short period of time (14 days), during which you can use it in evaluation mode. The large size of the programs is typical for all software created by Sausage Software, which is probably due to the choice of tools used for development (Visual Basic).

Unfortunately, the program does not have a number of required properties. For example, it is not possible to read an existing HTML file, so it is not possible to edit an existing image map that was created earlier. It is also impossible to save the work results directly in the HTML file. Saving the results is possible only in a file with a special EYE extension, which has a binary form and can be used later only in this editor. The generated HTML code is written to the Windows clipboard, from where it can be copied to any text editor.

As in all the editors described above, the creation and editing of hot spots is carried out directly on the image, however, the image is loaded into a window, the size of which, for some unknown reason, cannot be changed. If the image is larger than the size of the window, then you can use scrolling to view the image, but it becomes impossible to set the active area outside the viewport.

For the client-side version of the image-map, the editor does not prompt at all to set the default area URL. This may have been done on purpose since not all browsers support the default scope type. However, the editors described above solve this problem quite elegantly, automatically replacing the default area with a rectangular area with dimensions equal to the dimensions of the image.

The disadvantages are in some sense compensated for by separate additional properties of the editor. In particular, you can find out that the parrot, which is visible in the upper right corner of the above picture, is called Polly. He is very talkative, and users working on a computer equipped with a sound card will occasionally hear the cries of a parrot, which, however, have nothing to do with the actions being performed. And in one of the editor settings dialog boxes there is even a special item that allows you to silence the poor parrot. Here's an example of a top-notch service. Apparently due to the listed properties, the rating of this editor is estimated http://www.tucows.com, is very high, which cannot be said about the two programs described above.

Ultimately, the choice of the editor for creating image maps remains with the user.

pros

• Image maps let you define any shape for the reference area, which is especially useful for specifying a geographic area. Therefore, image maps are used most often in geographic topics.
• It is more convenient to work with one picture - you do not have to worry about joining separate fragments when cutting, and the picture can be easily placed in the right place.

Minuses

• The complex form of the link area increases the amount of HTML code. The contour is approximated by a set of straight line segments, for each point of such a segment two coordinates should be specified, and the total number of such points can be quite large.
• Accordingly, the complexity of specifying coordinates increases. It is not convenient to specify them manually, so you have to use special programs that visually show the areas and allow you to edit them.
• When changing the image, for example, when zooming in, you will have to re-set the coordinates of all areas of links.
• You cannot apply different effects to image cards that are available when cutting one image into fragments: rolling effect, partial animation, individual optimization of images for fast loading.
• There are no well-defined link boundaries. Therefore, these boundaries have to be highlighted by different means directly on the image. If the picture did not load for some reason, then it becomes very problematic to understand the set of links.

From the standpoint of user convenience, image maps have only one advantage - the inclusion of links of various forms. This adds clarity to the presentation of information - we are not limited to a rectangular link shape and can use links of complex configuration for our own purposes.

Image maps come in two different flavors - server and client. If the server option is used, the browser sends a request to the server to obtain the address of the selected link and waits for a response with the necessary information. This approach requires additional waiting time and separate files for each image map.

In the client version, the map is located in the same HTML document as the link to the image. To indicate that the image is a map, the element's usemap attribute is applied ... A pointer to the description of the map configuration, which is set using the element

Example 1. Creating an image map

Inside the container

Element has the following attributes.

• shape - defines the shape of the active area. The shape can be in the form of a circle (circle), rectangle (rect), polygon (poly).
• alt - adds alternative text for each area. Serves only as a comment for the link, since it is not displayed on the screen. Required if href is present.
• title - displays a tooltip when hovering over an area.
• href - specifies the address of the document to which to go, in its action is similar to a similar attribute of the element .
• coords - specifies the coordinates of the active area. Coordinates are measured in pixels from the upper left corner of the image, which corresponds to the value 0, 0. The first number is the horizontal coordinate, the second is the vertical one. The list of coordinates depends on the shape of the area.

For a circle, three numbers are set - the coordinates of the center of the circle and the radius.

Hello. Bernatsky Andrey with you.

In this tutorial I will show you how to create hTML image maps.

Image Map - this is some kind of picture, maybe a photograph, which has several active zones.

For example, when you click on the active zone, we go to a specific URL. If you are sitting in vkontakte.ru, there is an example of an image-map - this is when they mark in a photo, and when you hover the mouse over a person marked in the photo, his first and last name is shown, and when you click the mouse, you go to the page of this person.

First, I offer you a video version of this lesson:

This is all done quite simply. We take any photo with friends. Better to insert it into its own separate block