Last changed 28 July 2007 ............... Length about 900 words (3,000 bytes).
(Document started on 1 Jan 2005.) This is a WWW document maintained by Steve Draper, installed at http://www.psy.gla.ac.uk/~steve/demo.imagemaps.html. You may copy it. How to refer to it.

Web site logical path: [www.psy.gla.ac.uk] [~steve] demos: [html] [flowRound] [CSSposAbs] [this page]

Active maps: clickable image maps

See also
  • http://www.ihip.com/

      Server side

      Server side image maps are built on a simple mech in earliest HTML / browser defs. If you have a URL link, and in the link text there is an IMG with keyword/attribute ISMAP, then the URL is sent to server with coords of click appended as in URL?23,509

      Syntax of map file is typically like:
      rect   local.html   0,0 200,200
      where second field is a URL (in this case, relative to where .map file is).
      See http://httpd.apache.org/docs/mod/mod_imap.html

      You can combine this with old server-side maps, so if client fails to do it, or doesn't have defaults or some areas defined, then click will pass through.

    1. Oldest method has separate software programme "ImageMap" in server's cgi-bin. Call from webpage will be: < A href="http://www.psy.gla.ac.uk/cgi-bin/imagemap/~steve/ilig/pics/lobby.map"> I.e. URL is first that of software; then concatenated the file address of map file (database of active areas). (The browser will further concatenate the coords of the click.)

    2. Newer method if server has ImageMap enabled, is that the software is now part of server, and additionally server recognises any web page with ".map" suffix and applies to it. Call from webpage will be: < A href="pics/lobby.map">

      Client side images

    3. Use newer versions of HTML with syntax built in (v.3.2 but not v.2; v.4 seems to have function but different syntax), to get browser to do the work with newer builtin functions. The idea is to display an IMG as normal, but also have in the HTML a spec. of what subareas are clickable, and do what. Photoshop has a companion program "ImageReady" to create a file with the HTML code in. Otherwise, you need a gadget (java script?) to show you the X,Y coordinates within an IMG of the mouse.
      < IMG ... usemap="#mapdb1" ... >
      < MAP name="mapdb1">
        < AREA shape="rect" coords="0,0,200,200"
            href="http://www.psy.gla.ac.uk/" alt="x1" title="x2">
        < AREA SHAPE="rect" ALT="" COORDS="48,83,126,136"
            HREF="tech.html#history" TARGET="new"> < /map>
      An example is at: http://www.gla.ac.uk/R-E/pub/orgchart/grants-contracts.html
      http://www.psy.gla.ac.uk/~steve/ilig/

      You can have both this and ImageMap going at once: client side will grab clicks, but if they fall through then ImageMap will do them.

    4. Use .php facilities
    5. Write your own Java.

    Possible examples of good web image practice