CFX_MapClick

v1.0

August 2004


© Claude Schnéegans

DESCRIPTION
INSTALLATION
SYNTAX
EXAMPLE

DESCRIPTION

This tag returns the hexadecimal color value of a pixel defined by its coordinates in any GIF, JPEG or PNG the image. For a GIF image, it will also return the color index in the palette.

CFX_MapClick can then replace a complex set of AREA tags in a link on a GIF image with the attribute USEMAP set. If the coordinates of a click on the image is passed in X and Y attributes, then the color and the color index of the area clicked. If the image is correctly defined, using one and only one color per area, and if the color index of each area is stored in a database, then it is easy to associate any data with the area clicked by the user (see example below).

INSTALLATION

Installing the custom tag

To use this tag, you need to take the included mapClick.dll, install it on a drive on your server and make it known to the ColdFusion administrator.

You do this by going to the "CFX Tags" tab in the administrator,

  1. click the "add" button.
  2. Specify the name as CFX_MapClick.
  3. For the Server library(dll), specify the path to the .dll (the directory into which you copied mapClick.dll.
  4. It should say for "Procedure", "ProcessTagRequest".

That's it!

For more information refer to the ColdFusion documentation "Managing CFXs".

Installing documentation, example and database

Install the .cfm and .mdb files in any convenient directory on your server. To view the documentation, load mapClickDoc.cfm into your browser. In order to view the example, you need to define a datasource "mapClick" on the Access file.

SYNTAX

<CFX_MapClick 
	IMAGEFILE        = <full path name of the image file">
	[X]           = <abscise of the pixel>
	[Y]           = <ordinate of the pixel>
	>

TAG ATTRIBUTE CONTENT REQUIRED DEFAULT
<CFX_MapClick IMAGEFILE= Full path name of the image file on the server. The file must have an extension GIF, JPG, JPE, JPEG or PNG, and must be of one of these types of course. Yes N/A
X= Abscise (starting at 0) of the pixel of which the color is to be returned. Yes N/A
X= Ordinate (starting at 0) of the pixel of which the color is to be returned. Yes N/A

EXAMPLE

How to pass the coordinates of the last click?

If an image has the attribute ISMAP and it is used inside a link tag (<A ... > ... </A> then the coordinates of the click are passed as parameters in the URL address. 
<A HREF="testMapClick.cfm"><IMG SRC="states.gif" WIDTH="470" HEIGHT="330" BORDER="0" ALT="" ISMAP></A>
Then, in the called template, the cgi variable QUERY_STRING will contain a string like "?x,y" where x and y are the exact coordinates of the click on the image. You can get these values, and pass them to CFX_MapClick just by extracting the x,y string from QUERY_STRING, and then get x and y as the first and second elements in a list. 
<CFSET QUERY_STRING=listGetAt(QUERY_STRING, 2, "?")>
<CFSET Path=GetDirectoryFromPath(expandPath("*.*"))>
<CFX_mapClick IMAGEFILE="#path#states.gif" 
	X="#listGetAt(QUERY_STRING,1)#" 
	Y="#listGetAt(QUERY_STRING,2)#">

Variables set by the tag

Two variables in the calling template are set by the tag:
mapClickIndex contains the index value of the color in the palette for a GIF file. For other types of images, the variable is set to an empty string.
mapClickColor contains the color of the pixel, for all image types.

Test the tag here

INCLUDED WITH THE TAG

Maps

The previous example source code comes with the tag. In addition, you will find a couple of maps that you can use for testing or for you Web applications. All maps have colors compatible with the tag.

Canada, both in English and French
United States
La France par départements, et par régions

Database

A small Access database is also supplied, with tables for USA, Canada and France. Each table contains a column for the colors used in the associated map.
See other cool tags by
See other cool tags