IT SOLUTIONS
Your full service technology partner! 
-Collapse +Expand
Design
Search Design Group:

Advanced
-Collapse +Expand Design Store
PRESTWOODSTORE

Prestwood eMagazine

May Edition
Subscribe now! It's Free!
Enter your email:

   ► KBWebsite Design   Print This     
  From the August 2014 Issue of Prestwood eMag
 
Website Design:
Creating Image Maps
 
Posted 16 years ago on 3/26/2003 and updated 11/7/2008
Take Away: How to create image maps. Imagemaps allow the user to click on predefined sections of a graphic picture on your page and have the server respond as if they clicked on a text hyperlink.

KB100215



Imagemaps allow the user to click on predefined sections of a graphic picture on your page and have the server respond as if they clicked on a text hyperlink.
 
 

FrontPage users:
If you have the FrontPage extensions installed in your account, you do not need to worry about client-side or server-side imagemaps. FrontPage does everything for you. FrontPage has a built-in imagemap editor which you can use to map out your 'hot spots' and it automatically generates client-side and server-side code for you.

Client-side Imagemaps (recommended method)

Client-side imagemaps do not require the presence of a server-side script in order to interpret the coordinates of the "hot" regions of your multi-clickable image. The client-side imagemap is much more efficient than the server-side imagemap and it allows the visitor to see the actual URL associated with the mapped regions in the status bar of their web browser.

  1. Download a mapping program to create a map file based on the desired image. The map file will contain the coordinates of each clickable region. We recommend MapEdit (PC) and WebMap (Mac), but other imagemapping tools may also be available.
     

  2. Map out the hotspots using one of these programs and select the map file format "Client-side imagemap" as opposed to NCSA or CERN (for server-side maps) prior to saving the file.

    Here is a sample client-side map file created using MapEdit:

    <map name="sample">
    <area shape="rect" coords="20,27,82,111" href="hotspot1.html">
    <area shape="circle" coords="129,113,29" href="hotspot2.html">
    <area shape="rect" coords="21,158,170,211" href="mailto:support@abcdefghi.com">
    <area shape="default" nohref>
    </map>

  3. Include the map file code within the desired HTML document and reference it like so:

    <img border="0" src="image.gif" usemap="#sample">

    Substitute the name of the desired image above and note the relationship between the HTML tag, <map name="sample"> and the usemap="#sample" attribute above. You can test your new client-side imagemap offline if the links refer to files on your local PC.

Server-side Imagemaps

Server-side imagemaps are less efficient and less user friendly than client-side imagemaps, but they are more widely supported, especially with older browsers.

We use the Apache built-in imagemap processor, mod_imap, to process imagemap requests. mod_imap gives you the same basic functionality as either /cgi-bin/imagemap or /cgi-bin/htimage, but allows simpler HTML coding, runs faster, and has a variety of additional functions that you can use, including text menu generation for text-only browsers.

To implement mod_imap imagemap functionality, you need to perform two steps. First you need to create your imagemap file in NCSA format using an imagemapping tool such as MapEdit (PC) and WebMap (Mac).

# sample NCSA map file
rect /sales/index.html 5,11 20,32
poly /about/company.html 40,36 80,34 75,40 40,70
circle /contact.html#jeff 120,88 130,102
default /index.html

Then you need to reference your map file from its corresponding image in your HTML like this:

<A HREF="/somepath/somemapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>

Full details of the format as used by mod_imap can be found at:
http://www.apache.org/docs/mod/mod_imap.html
The file format information is in the second half of the page; the first half deals primarily with .htaccess options for text menu generation and other advanced features. You can ignore that information if you don't plan to use those features.

Converting from /cgi-bin/imagemap to mod_imap:

If you're currently using /cgi-bin/imagemap, it is easy to switch to mod_imap. If your HTML looks like this:

<A HREF="/cgi-bin/imagemap/somepath/mapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>

Just change it to:

<A HREF="/somepath/mapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>

And you're done. Notice that all you're doing is removing the '/cgi-bin/imagemap' part. mod_imap and /cgi-bin/imagemap both use the NCSA imagemap format, so no other changes are needed.

Converting from /cgi-bin/htimage to mod_imap:

If you're currently using /cgi-bin/htimage, you'll make a similar change, i.e.:

<A HREF="/cgi-bin/htimage/somepath/mapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>

becomes:

<A HREF="/somepath/mapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>

The htimage program uses the CERN imagemap format, so you must also convert your mapfiles to NCSA format. If you're using a graphical imagemap editor, most allow you to "Save As" either format, so you should be able to just load your files and resave them under NCSA format. If your editor doesn't support NCSA, or you are creating your mapfiles manually, you must make the changes yourself.

A simple example comparing the CERN and NCSA formats can be found at:

http://www.ihip.com/mapfile.html

How to create image maps. Imagemaps allow the user to click on predefined sections of a graphic picture on your page and have the server respond as if they clicked on a text hyperlink. Client-side imagemaps do not require the presence of a server-side script in order to interpret the coordinates of the "hot" regions of your multi-clickable image. The client-side imagemap is much more efficient than the server-side imagemap and it allows the visitor to see the actual URL associated with the mapped regions in the status bar of their web browser.


Comments

0 Comments.
Share a thought or comment...
 
Write a Comment...
...
Sign in...

If you are a member, Sign In. Or, you can Create a Free account now.


Anonymous Post (text-only, no HTML):

Enter your name and security key.

Your Name:
Security key = P1191A1
Enter key:
KB Post Contributed By Mike Prestwood:

Mike Prestwood is a drummer, an author, and creator of the PrestwoodBoards online community. He is the President & CEO of Prestwood IT Solutions. Prestwood IT provides Coding, Website, and Computer Tech services. Mike has authored 6 computer books and over 1,200 articles. As a drummer, he maintains play-drums.com and has authored 3 drum books. If you have a project you wish to discuss with Mike, you can send him a private message through his PrestwoodBoards home page or call him 9AM to 4PM PST at 916-726-5675 x205.

Visit Profile

 KB Article #100215 Counter
6508
Since 4/2/2008
Go ahead!   Use Us! Call: 916-726-5675  Or visit our new sales site: 
www.prestwood.com


©1995-2019 Prestwood IT Solutions.   [Security & Privacy]