Image Borders and Maps - HTML

Image Borders

You can use CSS styles to create borders around images. Previous versions of HTML supported a border attribute for the <img> tag, which worked similarly to the border attribute of the <table> tag. However, this attribute has been deprecated for use with the <img> tag. Instead, you should use styles. CSS supports quite a few border properties, as shown in Table.

CSS Border Properties

CSS Border Properties

For example, to define a 4-pixel-wide border around an entire image, you can use the following code:

To define a border on just the left and right sides of an image, you would use the following:

Tip:To simplify defining a different border on one side of an image, use the border property first to define a border on all sides and then the appropriate borderside property for the side that is the exception, overriding the previous setting for that side. For example, to create a border on all sides of an image except the right, you could specify border-top, border-bottom, border-left, and border-right properties individually. Or, you could use just border and border-right:

Image Maps

Image maps provide a way to map certain areas of an image to actions. For example, a company Web site might want to provide a map of the United States that allows customers to click a state to find a local office or store. There are two types of image maps, client-side and server-side. Client-side image maps rely upon the user agent to process the image, the area where the user clicks, and the expected action. Server-side image maps rely upon the user agent only to tell the server where the user clicked; all processing is done by an agent on the Web server.

Between the two methods, client-side image maps are generally preferred. They allow the user agent to offer immediate feedback to the user (like being over a clickable area) and are supported by most user agents. Server-side agents can also bog down a server if the map draws consistent traffic, hides many details necessary to provide immediate feedback to the user, and might not be compatible with some user agents.

Tip:If you want an image to be clickable and take the user to one particular destination,you don’t have to use an image map. Instead, embed the <img> tag in an appropriate anchor tag (<a>) similar to the following:

Specifying an image map

A client-side image map is generally specified within the contents of a <map> tag and linked to an appropriate<img> tag with the <img> tag’s usemap attribute. For example, to specify a map for an image, travel.jpg, you could use this code:

Inside the <map> tags you specify the various clickable regions of the image, as covered in the next section.

Specifying clickable regions
To specify an image map, a list of polygonal regions must be defined on an image and referenced in the HTML document. Three different types of polygons are supported: rectangle, circle, and free-form polygon.

  • rect—Defines a rectangle area by specifying the coordinates of the four corners of the rectangle.
  • circle—Defines a circle area by specifying the coordinates of the center of the circle and the circle’s radius.
  • poly—Defines a free-form polygon area by specifying the coordinates of each point of the polygon.

Note that all coordinates of the image map are relative to the top-left corner of the image (effectively 0, 0) and are measured in pixels. For example, suppose you wanted an image for a travel site with a picture of a car, plane, and hotel. When the user clicks one of the pictures, they are taken to the right page for auto rentals, airfare, or hotel reservations.

An image ready to be used as an image map.

An image ready to be used as an image map.

The regions that can be used for the map are within the three icon squares (the white squares around the icons). The regions are all rectangular, uniform in size (121 pixels square), and have the following upper-left coordinates:

  • car—35 x, 11 y
  • plane—190 x, 11 y
  • hotel—345 x, 11 y

Knowing the upper-left corner coordinates and the size of each rectangle, you can easily figure out the coordinates of the bottom-right corner of each rectangle.

Tip:Several tools are available to help create image map coordinates. Use your favorite search engine to find a dedicated piece of software to map regions, or examine your graphics program to see if it can create regions for you. Paint Shop Pro is an excellentWindows-based image editor that has image map tools built in.

Specifying regions using anchor tags
You can specify regions using anchor tags with shape and coords attributes. For example, to specify the three regions previously outlined, you could use the following:

Note that the link text helps the user determine what the clickable area leads to, as shown by the Internet Explorer ToolTip

The link or alt text of a clickable region helps the user determine where the clicked region leads.

The link or alt text of a clickable region helps the user determine where the clicked region leads.

Specifying regions using area tags
Another way to define regions is by using <area> tags instead of anchors:

Putting it all together

A document with a working image map (as outlined in this section) would resemble the following code:

Note: The image map example in this chapter is somewhat simplistic, using three identical rectangles for its regions. Image maps can be used for more complex purposes, such as the clickable U.S. map mentioned earlier in this chapter, allowing users to click various buildings on a map for more information, or parts on an exploded diagram of a machine

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics