Ordinarily, placing an image within anchor tags makes the entire image a link to a single document when the user clicks anywhere on the image. As an alternative, you can create multiple links, or "hot spots," within a single graphic. These graphics are called imagemaps. The effect is created with HTML tags and/or text files and scripts on the server; the image itself is an ordinary graphic file that just serves as a backdrop for the pixel coordinates.
There are two types of imagemaps: client-side and server-side. For client-side imagemaps, the coordinate and URL information necessary to create each link is contained right in the HTML document. The process of putting the pieces together happens in the browser on the user's machine (thus, client-side). For server-side imagemaps, as the name suggests, the map information resides on the server and is processed by the server or a separate CGI script.
Client-side imagemaps are a slightly newer technology and are not supported by firstversion browsers (although nearly all current browsers know what to do). For this reason, some web developers create redundant imagemaps (both client- and server-side) so that if the browser doesn't recognize the client-side map, the server's imagemap processor can take over.
The key to making imagemaps work is a map, based on the image, that associates pixel coordinates with URLs. This map is handled differently for client-side and server-side, but the outcome is the same. When the user clicks somewhere within the image, the browser passes the coordinates of the mouse pointer to the map, which, in turn, generates the appropriate link.
Although it is possible to put together imagemap information manually, it is much easier to use a tool to do it. There are many imagemap creation tools available as shareware for both Windows and the Mac. Be sure to look for one that is capable of outputting both client- and server-side map information, such as the following:
MapMaker 1.1.2 by Frederic Eriksson
MapEdit, by Tom Boutell
The full-featured WYSIWYG web authoring tools (such as Macromedia Dreamweaver and Adobe GoLive) have imagemap creation tools built in. This is particularly handy for creating client-side imagemaps right in the current document.
Creating the map
Regardless of the tool you're using, and regardless of the type of imagemap you're creating, the process for creating the map information is basically the same. Read the documentation for your imagemap tool to learn about features not listed here.
Figure: Creating map information (shown in MapMaker 1.1.2)
If you do not have an imagemap tool, it is possible to write out the map information by hand following the examples in this chapter. Simply note the pixel coordinates of the shapes as indicated in an image editing program (in Photoshop, they are provided in the Info palette) and type them into the appropriate place in the map file.
Client-side imagemaps have three components:
There are many advantages to using client-side imagemaps. They are self-contained within the HTML document and do not rely on a server to function. This means you can test the imagemap on your local machine or make working site demos for distribution on disk. It also cuts down on the load on your server and improves response times. In addition, complete URL information displays in the status bar when the user mouses over the hot spot (server-side imagemaps display only coordinates).
The only disadvantage to client-side imagemaps is that because it is slightly newer technology, they are not universally supported. Netscape Navigator 1.0 and Internet Explorer 2.0 do not support client-side imagemaps. Experimental or obscure browser programs may not either. Fortunately, these browsers make up a miniscule portion of the current browser population.
Sample client-side imagemap
Figure shows a sample imagemapped graphic.
Figure: Imagemapped graphic
Example provides the HTML document that contains the client-side imagemap.
Example: HTML for client-side imagemap
(A): This marks the beginning of the map. You must give the map a name. Within the <map>, there are <area> tags for each hotspot within the image.
(B): Each area tag contains the shape identifier (shape), pixel coordinates (coords), and the URL for the link (href). In this case, the shape is the rectangle (rect) that corresponds to the black square in the center of the image. The value of the cords attribute identifies the top-left and bottom-right pixel positions of the rectangle (ooords="x1,y1,x2,y2"). Some browsers also support the nonstandard rectangle as an equivalent to rect, but this is not widely supported.
(C): This area corresponds to the circular area on the right of the image in above Figure.
Its shape is circle. For circles, the first two coordinates identify the position of the center of the circle and the third value is its radius in pixels (coords="x,y,r"). Some browsers also support the nonstandard circ as an equivalent to circle.
(D): This is the area tag for the irregular (polygon) shape on the left of the image in above Figure. For polygons, the coordinates are pairs of x,y coordinates for each point or vertex along the path that surrounds the area (coords="x1,y1,x2,y2,x3,y3..."). At least three pairs are required to define a triangle; complex polygons generate a long list of coordinates. Some browsers also support the nonstandard polygon as an equivalent to poly.
(E): The USEMAP attribute is required within the image tag to indicate that this graphic is an imagemap that uses the <map> named "spacey".
Server-side imagemaps work with all browsers, but they are a bit more involved to create. In addition, they rely on the server, which makes them less portable than their client-side counterparts and increases the load on the server. For a number of reasons, server-side imagemaps are going out of style and aren't used nearly as often as their client-side counterparts.
Server-side imagemaps have four elements:
Because server-side imagemaps are so dependent on the configuration of the server, you need to coordinate with your server administrator if you plan to use them. You'll need to find out what type of .map file to create ("NCSA" and "CERN" are two possibilities, based on the type of server) as well as the pathname to which the imagemapped graphic should be linked (this usually includes a cgi-bin directory).
Sample map definition file (.map) file
Example shows a server-side image map (called spacey.map) for the imagemapped graphic shown in above Figure.
Example: Server-side imagemap
(A): This establishes the default URL, which is what the browser displays if the user clicks outside one of the clickable areas. Set this to the current document if you want to give the impression that the click has no effect.
(B): Each hot area in the image is defined by a shape name (rect, circle, poly), a URL, and a set of pixel coordinates. The syntax for the coordinates varies by shape and is generally the same as explained for client-side imagemaps above. The syntax for some shapes may vary from server to server. In this .map file, the coordinates are defined for use by an Apache server. Note that the coordinates defining the circle are different than in the client-side example. Apache's syntax for defining a circle is "x1,y1 x2,y2," which corresponds to the x,y coordinates of the circle's center point followed by the x,y coordinates for a point on the circle. Server-side imagemaps do not recognize the nonstandard shape values rectangle, circ, and polygon.
The HTML document
Within the HTML file, the image is treated as shown here:
The anchor tag links the whole graphic to the map definition file (spacey.map), which is located within the cgi-bin directory on the server. This is a typical configuration; however, you should follow your server administrator's instructions.
The ismap attribute within the image tag tells the browser that the graphic is an imagemap.
When Not to Use Imagemaps
Imagemaps are not always the best solution and are actually waning somewhat in popularity as web design evolves. Slicing up a large image, each slice of which can be linked to a different document, and holding the pieces together with a table often offers functionality that an imagemap can't match. This technique is so popular that it is built into web graphics tools such as Macromedia Fireworks and Adobe Photoshop 6 and ImageReady.
Providing complete alternative text
When a user cannot view images (or has chosen to turn them off), the browser displays the text specified by the alt attribute within the <img> tag. Unfortunately, for each imagemap graphic you get only one alternative text message, which may not be useful for users with non-graphical browsers (although Lynx can construct a list of links based on the href values from each area).
One common solution to this problem is to provide a redundant set of links in HTML text somewhere else on the page so that users who cannot view graphics can still navigate the site.
If the image is divided into pieces rather than using an imagemap, you can provide alternative text for each linked piece, which alleviates the need to add the extra line of linked text to your HTML page.
Web Designing Related Interview Questions
|HTML Interview Questions||HTML 5 Interview Questions|
|Flash Interview Questions||Graphic Design Interview Questions|
|Illustrator Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||Dreamweaver CS3 Interview Questions|
|CSS Advanced Interview Questions||Web Developer Guide Interview Questions|
|Log Shipping Interview Questions||Spring Boot Interview Questions|
|UI Designer Interview Questions||Bootstrap 4 Interview Questions|
Web Designing Related Practice Tests
|HTML Practice Tests||HTML 5 Practice Tests|
|Flash Practice Tests||Graphic Design Practice Tests|
|Illustrator Practice Tests||Dreamweaver Practice Tests|
|UI Developer Practice Tests||Dreamweaver CS3 Practice Tests|
|Web Developer Guide Practice Tests||Advanced jQuery Practice Tests|
Web Designing Tutorial
Designing For A Variety Of Browsers
Designing For A Variety Of Displays
Web Design Principles For Print Designers
A Beginners Guide To The Server
Printing From The Web
Structural Html Tags
Adding Images And Other Page Elements
Specifying Color In Html
Cascading Style Sheets
Server Side Includes
Designing Graphics With The Web Palette
Audio On The Web
Video On The Web
Flash And Shockwave
Introduction To Smil
Introduction To Dhtml
Introduction To Xml
Wap And Wml
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.