The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Web Graphics - Server-Side Image Maps

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

CGI Program Required ...

An HTML tutorial and demonstration designed to remove the mystique surrounding the operation of HTML server-side Image Maps. Server-side Image Maps require an Image Map image plus some HTML Markup on the browser-side but the major part of the processing is carried out by a CGI (Common Gateway Interface) program located on a web server. This tutorial discusses the HTML Markup that is required on the browser-side and it provides a simulated demonstration of the coordinates that are sent to the server-side CGI program for further processing, whenever a user clicks on the Image Map.

The Simulated Demo ...

We have prepared the adjoining graphic to demonstrate the operation on the browser-side, of an HTML server-side Image Map. The primary difference between our demonstration and a real HTML server-side Image Map is that in our demonstration the x,y coordinates are displayed immediately below the Image Map but a real HTML server-side Image Map would transmit the x,y coordinates to a CGI program on a web server.

If you place your mouse cursor over the demo Image Map image and then left click, you should see the x,y coordinates of the click position displayed in the area below the Image Map. These x,y coordinates represent the only information that is generated and sent to the CGI program on the web server which means that HTML Image Maps are relatively simple to incorporate into a web page.

W3C Recommendation ...

W3C (World Wide Web Consortium) recommend that if you want to include an Image Map on your web page, that you should always use a client-side map unless you have a specific requirement for a server-side map. One example of a possible requirement for a server-side Image Map could be a high security situation where you do not want anyone to know where sensitive documents are located and being served from. There are a few other examples where server-side maps are more appropriate than client-side maps. If you decide that a client-side Image Map would meet your requirements better than a server-side Image Map then I suggest that you read our tutorial about Client-Side Image Maps.

 

The Image Map Image ...

The first thing you require is an image for your Image Map and it is worth noting that a server-side Image Map image has exactly the the same requirements as a client-side Image Map image. You can select or adapt an existing photograph, picture or line-art image or alternatively, you can create a special image from scratch. Whichever option you choose it is likely that you will need to edit or prepare the image using your favourite graphics bit-image editor program and you would normally save your image in an optimized "GIF", "JPG" or "PNG" format. The design of your image must obviously fit the needs and purpose of your Image Map. Optimisation is important for all images that are to be displayed on a web page and if you are unsure about these subjects then I suggest that you take the opportunity to read the following pages.

 

The HTML Markup ...

The HTML Markup for a server-side Image Map is almost identical to a static HTML image link. There is only one difference between the two and this is that the server-side Image Map requires the addition of the 'ismap' attribute in the Image Map image tag. If you are new to HTML Image Maps then you should remember not to confuse the 'ismap' attribute used in server-side Image Maps with the 'usemap="#mapName"' attribute used in client-side Image Maps.

an HTML IMAGE Tag displaying a graphical image...

<img src="mapimage.gif" width="250" height="250">

A simple addition to the tag ties the graphic to the server-side Image Map. You do this by adding the 'ismap' attribute to the image tag in the following manner.

an HTML IMAGE Tag with the ISMAP Attribute added ...

<img src="mapimage.gif" width="250" height="250" ismap>

Finally you wrap the image tag in an HTML hypertext link using the Anchor tag and the script is complete. This script will record the users mouse clicks on the map image and send the x,y coordinates of those mouse clicks to the CGI program specified in the Anchor link tag.

an example HTML script for a server-side Image Map ...

<a href="http://yoursite.com/cgi-bin/mapscript.cgi">
<img src="mapimage.gif" width="250" height="250" ismap></a>

Map Coordinates ...

Having created your map image you must then obtain the x,y coordinates for all the shapes you want to create hotspots for in your Image Map. These x,y coordinates can usually be obtained using your graphics bit-image editor program or an alternative way could be to load your image into our Wizards's QuikMap utility which you can access using the following link.

Server-Side Maps Explained ...

The coding to create a server-side Image Map falls into two distinct sections. The first section is the HTML Markup and map image which are located on the web page. This server-side Image Map has one very simple job which is to record the mouse clicks on the map image and send the x,y coordinates of those mouse clicks over the Internet or other network to a specially written CGI program on the Web server.

The second section is the CGI program or script which is located on the web server and it is this which receives the x,y coordinates sent by the HTML Markup in the users browser. The CGI program or script receives these x,y coordinates and takes any actions that it has been programmed to take.

It is the CGI programming or scripting that is not covered by this tutorial although we have provided some third-party example program source code and scripts which can be viewed in the 'Third-Party CGI Scripts' section towards the bottom of this page.

Although our recommendation is to use client-side Image Maps unless you are a competent CGI programmer, we do explain the HTML script for a server-side Image Map and we also provide a simulated demonstration. We also tell you about one way that you can use server-side Image Maps without connecting to a CGI program or script on the Web server, but more of that later.

Advantages & Disadvantages ...

Server-side Image Maps have one advantage over client-side Image Maps or other methods of navigation and that is improved security. When a user clicks on a server-side Image Map there is no underlying information or hypertext links available for the user to find out about the target page. They are simply sending the x,y coordinates of the click to the web server and the CGI program on the server processes the request according to the x,y coordinates it receives. The user has no knowledge of what is happening and one example that demonstrate how useful this might be is when connecting a user to a secure server page for a credit-card payment.

There are two main disadvantages to using server-side Image Maps. The first disadvantage is the time lapse caused by the x,y coordinates being transmitted over the Internet to the Web server, the server's response time in reacting to the arrival of the x,y coordinates and then processing them, and the further overhead of returning a CGI generated HTML document to the Web browser. On a busy server this process could take some time.

The second disadvantage is that your site has to be hosted on a web server that properly supports user CGI programs and then you need to have the programming ability to programme (or adapt) the CGI program that receives and processes the x,y coordinates. If we take an example of an Image Map for a menu system that mainly contains rectangular shapes, then testing for the location of the click is relatively straightforward. However, if we compare this with an example of an Image Map that is a map of the World then testing for the location of the click would be extremely difficult.

Accessibility & Useability ...

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Server-Side Image Maps An HTML tutorial and demonstration about how server-side Image Map work. Server-side Image Maps require HTML Markup but the main part of the processing is carried out by a CGI program on a web server.

select/copy the link Markup ...

 
Server-Side Image Map Links
 
Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
 
Copyright © 1998,2008, Gilbert Hadley, Liverpool, England